Adding class to filtered Isotope items - javascript

My goal is to add a class to all filtered Isotope items.
I am using the getFilteredItemElements functionality from the Isotpe documentation.
I set a variable equal to all the filtered items as below:
var filteredItems = $grid.isotope('getFilteredItemElements');
This returns me an array of elements:
[div.grid-item.p-1.summer.value1.none, div.grid-item.p-1.summer.value1.none, div.grid-item.p-1.summer.value3.none]
I then wanna add a class to the items in the array by using jQuery .each.
filteredItems.each(function(){
this.addClass('');
});
But the browser returns Uncaught TypeError: filteredItems.each is not a function
Am I writing a each function incorrect or is it not possible to use .each in this case?

You can also do
[...filteredItems].forEach(elm => elm.classList.add(''));

Related

knockout js, add new item to an array

So this follows on from my previous question:
knockout js, add additional elements to an array
Basically I have an app where a user fills in certain data, clicks next and this is added to an array. However, what I'd like to do is add some items into the array before the user even begins using the app (these items I get from a database). The idea being that at the start they can view each item in the array and then choose and an item and edit this item. I've got a feeling I'm missing something blindingly obvious but I cannot seem to figure it out
Knockout observable arrays have equivalent functions to native JavaScript arrays. See: http://knockoutjs.com/documentation/observableArrays.html
So you need just to use arr.pop(item) or arr.push(item).
In case you need to replace all items and want to avoid multiple events to raise, use observableArray.valueWillMutate() and valueHasMutated() functions. See sample where I do swap the entire array:
ko.observableArray.fn.replaceWith = function (valuesToPush) {
// NOTE: base on - ko.observableArray.fn.pushAll
var underlyingArray = this();
var oldItemcount = underlyingArray.length;
this.valueWillMutate();
// adding new items to obs. array
ko.utils.arrayPushAll(underlyingArray, valuesToPush);
// removing old items (using KO observablearray fnc.)
if (oldItemcount > 0)
this.removeAll(underlyingArray.slice(0, oldItemcount));
this.valueHasMutated();
return this; //optional
};

IN CQ, how to set value of all the items in Panel to blank

In ExtJS panel I need to set value of all items (e.g. textfield, pathfield) to blank. I don't want to set value of each individual item to blank but of whole panel in one go.
I am able to get list of items
function getAllChildren (panel) {
/*Get children of passed panel or an empty array if it doesn't have thems.*/
var children = panel.items ? panel.items.items : [];
/*For each child get their children and concatenate to result.*/
CQ.Ext.each(children, function (child) {
children = children.concat(getAllChildren(child));
});
return children;
}
but how to set to blank for whole panel? Please suggest what need to be done in this case.
Actually, it's not possible to do it with one liner - all at the same time. What your method returns is purely an array of objects. In fact if such syntax existed, it would iterate over all fields anyway.
Though clearing all fields, having the method you've proposed is very trivial to do. Just iterate over them all and call reset method. Mind some (especially custom) widgets might not handle it.
var fields = getAllChildren(panel);
CQ.Ext.each(fields, function(field) {
if (child.reset) {
child.reset();
}
});
You've got similar loop in your getAllChildren code - you might reset field at the same place.
The method is defined in Field type which is usually a supertype of each dialog widget. You can read more here.

Getting elements from array by class

I have a list of list items that i get like this:
var searchResultItems = $(resultContainerId + ' li');
The search result items can have different classes. How can i get all items of a certain class from the searchResultItems? Im looking for something like:
var highPriorityItems = searchResultItems.find('.highPriority');
I know find() does not work in this situation because it goes through child elements. I am hoping there is something similar what im looking for.
The .filter method can do exactly what you want if substituted for .find in your example.

Using jQuery TinySort plugin to sort by attribute

I have an unordered list with class name .summary_ul with a number of list items of class .summary_ul_li, each of which has a 'val' attribute whose value is a string of letters. I am calling this function from the javascript file:
function sort_by_val(){
var $tosort = $('.summary_ul_li');
$tosort.tsort({attr:"val"});
}
However, $tosort does not sort, and remains in its original order. I am trying to use this plugin:
http://tinysort.sjeiti.com/
Is there something I'm missing here?

Remove element from jQuery object

I have a jQuery object that is created via jQuery .find() as seen below...
var $mytable= $('#mytable');
var $myObject = $mytable.find("tbody tr");
This works great and creates a jQuery object of all the tr elements in the tbody. However, as I'm looping over the data, I need to be able to remove parts of the object as I go. For instance, if the above call returns a jQuery object named $myObject with a length of 10, and I want to remove the index 10, I thought I could just do $myObject.splice(10,1) and it would remove the element at index 10. However this doesn't seem to be working.
Any ideas why? Thank you!
UPDATE
I basically just want to be able to remove any element I want from $myObject as I loop through the data. I know it's zero based (bad example above I guess), was just trying to get my point across.
UPDATE
Okay, so I create the object using the find method on the table and at it's creation it's length is 24. As I loop over the object, when I hit an element I don't want I tried to use Array.prototype.splice.call($rows,x,1) where x represents the index to remove. Afterwards when I view the object in the console, it still has a length of 24.
Use .not() to remove a single element, then loop through the jQuery object at your leisure:
var $myObject = $mytable.find('tbody tr').not(':eq(9)'); // zero-based
http://jsfiddle.net/mblase75/tLP87/
http://api.jquery.com/not/
Or if you might be removing more than one:
var $myObject = $mytable.find("tbody tr:lt(9)");
http://jsfiddle.net/mblase75/9evT8/
http://api.jquery.com/lt-selector/
splice is not part of the jQuery API, but you can apply native Array methods on jQuery collections by applying the prototype:
Array.prototype.splice.call($myObject, 9, 1); // 0-index
You can also use pop to remove the last item:
Array.prototype.pop.call($myObject);
This should also give you a correct length property.
splice is an array method, not a jQuery object method.
Try slice
Javascript uses zero-based arrays. This means that the final item in the array (i.e. the 10th item) will be at index 9.
$myObject[9]
So you need something like this:
$myObject.splice(9, 1);
This will remove the element from your existing array, and also return it.
You could also use filter :
var $myObject = $mytable.find("tbody tr").filter(':lt(9)');
You can use .remove to remove an element from the DOM.
So to remove the element at index 9 of the $myObject array, use:
$myObject.eq(9).remove();
If you want to keep the element that you are removing, you can also do:
var removedElement = $myObject.eq(9);
removedElement.detach();

Categories