Let's say I do something like :
$('.item').each(function (index)
{
if (index === 3)$(this).remove();
else if (index === 4)$(this).remove();
});
Will this work or will I mess up the loop/indexes since I will be removing elements from an array while looping through it ?
Same question when adding :
$('.item').each(function (index)
{
$(this).parent().append('<div class="item"></div>');
});
Will this create an infinite loop?
Not it doesn't as you are removing the element only from the dom structure not from the jQuery object itself.
The jQuery obejct is not a live object like the HTMLCollection object returned by getElementsByClassName().
So even though the element is removed from the dom, its reference is still present in the jQuery object which called the each method.
Related
Explaining by example:
$(selector).each(function () {
if (expression) {
$(this).next().remove();
}
....
});
Based on an expression I remove an element that also are a part of the selector, and in effect are removing the next element the .each() function will get.
The .each() function doesn't seem to care and are running it's code on the removed element breaking the iteration process on my code in the each function. Basically meaning a counter in the .each() function will count the deleted element even though it shouldn't.
Is there a way to refresh or update the .each() function so it skips elements that where removed after its initiation?
Better to filter your elements before:
$(selector).filter(function() {
if (expression) {
return false;
}
}).each(function() { .. });
I do not think you can modify the collection from inside the each call.
Even better, you can split this in two calls, since if you do all of it in one call only, the selector will be cached:
$(selector).filter(function() {
return expression;
}).next().remove();
// and then
$(selector).each(function() { ... }); // now *without* removed elements.
The first time you query the DOM with $(selector) you are given back a jQuery collection containing all the elements (specifically, references to the elements) that satisfy that selector. Any changes to the DOM do not affect that collection. If you happen to modify the DOM in such a way that the elements in the collection no longer satisfy the initial selector, this will not be reflected.
The correct solution to this problem is to not modify the DOM in the each loop, and basically find another way to solve your problem. But a simple (computationally expensive) solution is just to recheck the element on the initial selector upon iteration... you can use the .is method to achieve this:
$(selector).each(function () {
var $this = $(this);
if ($this.is(selector)) {
if (expression) {
$this.next().remove();
}
}
....
});
I am trying to find an element with the ID '' that is within the element '', and therefore is its child.
I am using the $.find method to perform the search.
If the child object is found, I'd like to perform some actions, and if the child object isn't found, I'd like to do different things.
However, even though I know that there is no such child element existing, the jQuery.find method reports an object that I am not sure, from inspecting in the Watches window, what it is.
Here's the relevant code snippet:
function CreateResourceKeyTextBox(resourceKeyId, editMode) {
var resourceKeyTableCell = $("#tdKeyResourceKeyId" + resourceKeyId);
var resourceKeyNameTextBox = null;
var alreadyExistingResourceKeyNameTextBox = resourceKeyTableCell.find('#txtResourceKeyName' + resourceKeyId);
if (alreadyExistingResourceKeyNameTextBox != null && typeof alreadyExistingResourceKeyNameTextBox != "undefined") {
resourceKeyTableCell.html('');
resourceKeyNameTextBox = alreadyExistingResourceKeyNameTextBox;
resourceKeyNameTextBox.css('display', 'block');
resourceKeyNameTextBox.appendTo('#tdKeyResourceKeyId' + resourceKeyId);
resourceKeyNameTextBox.css('width', '96%');
}
jQuery query functions always return an object, even if there's no matching DOM elements.
Check the length, it will be 0 if there's no element in the set :
if (alreadyExistingResourceKeyNameTextBox.length ...
jquery's find method returns a jquery object whose internal matched elements are the corresponding elements to your css selector.
If css selector fails to match any elements, then, jquery's find method's return object's internal matched elements is an empty array. You can get internal matched elements with .get method as follows:
var elems = $.find(css_selector).get()
this method returns array of DOM elements not jquery object instances, and you can check empty array using following syntax
var elems = $.find(css_selector).get()
if(elems.length === 0){
//array is empty
}else{
//array is not empty
}
This behaviour of jquery minimizes any syntax errors you might get otherwise, jquery will work without errors, no matter your css selector matches any DOM elements or not. This is beneficial in most cases, where you simply apply some changes on matched elements regardless of there are any. If existence of such elements is critical to your business logic, you should check it manually.
You should use alreadyExistingResourceKeyNameTextBox.length != 0 instead I think
if an object is not found using jquery .find() method, it always return an empty array. if you are getting anything other than that, you need to check your DOM. You can always check the length of the result i.e. result.length > 0 || result.length === 1, depending on your need
I have a loop:
for (index = 0; index < total_groups; index += 1) {
groups[index].list_item = $(list_item_snippet);
// Closure to bind the index for event handling
(function (new_index) {
groups[index].list_item.find('.listing-group-title')
.html(groups[index].Group.Name)
.click(function(e){
fns.manageActiveGroup(new_index, groups);
return false;
});
})(index);
// Append to DOM
mkp.$group_listing.append(groups[index].list_item);
};
I would rather not call append() each time the loop fires.
I know that I could use a String and concatenate the markup with each loop iteration and append the string to mkp.$group_listing at the end, however this flattens the object and the bindings are lost (I am not relying on IDs).
Is there a way to perhaps add my objects to an array and append them all in one go at the bottom without flatening to HTML?
Assumptions:
$(list_item_snippet) contains some HTML defining a list item (and includes an element with class .listing-group-title).
groups is a block of JSON defining a 'group' in my script
The closure works perfectly
Edit:
Found that I can use the following syntax to append multiple elements:
mkp.$group_listing.append(groups[0].list_item, groups[1].list_item );
But i obviously need to automate it - it's not an array it's just optional additional function parameters so I'm not sure how to do this.
To append an array of elements to a selector you can use this:
$.fn.append.apply($sel, myArray);
In your case, since it's actually the .list_item property of each array element that you need you can use $.map to extract those first:
$.fn.append.apply(mkp.$group_listing, $.map(groups, function(value) {
return value.list_item;
}));
Instead of bind it the way you've done, if you bind it using on() like below,
$(document).on('click', '.listing-group-title', function() {
// click handler code here
});
You can flatten the HTML and append it in one statement and it'll still work.
Note: For better efficiency, replace document in the above statement to a selector matching the closest parent of .listing-group-title
Yes. Use the jQuery add method to add all your items to a jQuery object. Then append that one object.
http://api.jquery.com/add/
EDIT: Example:
var arr = $();
for (index = 0; index < total_groups; index += 1) {
groups[index].list_item = $(list_item_snippet);
// Closure to bind the index for event handling
(function (new_index) {
...
})(index);
// Add to jQuery object.
arr.add(groups[index].list_item));
};
mkp.$group_listing.append(arr);
I know this has been asked and answered a couple times already, but I'm still confused about how to reference the current object when iterating over a jQuery array. For example, the following code gives me the error TypeError: genH3Array[i].next is not a function. What is the right way to reference the current array object?
var genH3Array = $('#Generation_II').parent();
genH3Array.push($('#Generation_III').parent());;
genH3Array.push($('#Generation_IV').parent())
$.each(genH3Array, function(i, value)
{
if(genH3Array[i].next().attr("align") == "center")
{ genH3Array[i].next().next().next().insertBefore(heading.next())
}
genH3Array[i].next().next().insertBefore(heading.next())
genH3Array[i].next().insertBefore(heading.next())
})
EDIT: Thanks for all your help, everyone. I know this was probably a cinch for most of you, but it was a major headache for me. The corrected code is below:
var genH3Array = $('#Generation_II,#Generation_III,#Generation_IV').parent();
$.each(genH3Array, function(i, value)
{
console.log($(this).next());
if($(this).next().attr("align") == "center")
{
$(this).next().next().next().insertBefore(pokemonHeader.next())
}
$(this).next().next().insertBefore(pokemonHeader.next())
$(this).next().insertBefore(pokemonHeader.next())
$(this).insertBefore(pokemonHeader.next())
})
This part:
var genH3Array = $('#Generation_II').parent();
genH3Array.push($('#Generation_III').parent());
genH3Array.push($('#Generation_IV').parent());
...isn't really the way to use .push() against a jQuery object. When you .push() a value in, it should be a DOM element. Not a jQuery object.
You could simplify that entire bit like this:
var genH3Array = $('#Generation_II,#Generation_III,#Generation_IV').parent();
Now you'll have the .parent() of all three in the object.
Not entirely sure what the each is supposed to do, but it seems like you're trying to take the next three elements of each one, and insert them after some heading element.
$.each(genH3Array, function(i, value) {
if($(this).next().attr("align") == "center") {
heading.after( $(this).nextUntil('sometarget:last') );
}
heading.after( $(this).nextUntil('sometarget') );
});
I really don't know if this is what you want. It's a little hard to tell.
Both value and this point to the current item in the iteration, but that isn't your problem. Your problem is that the item returned by [] on a jQuery object isn't a jQuery object. You could do this:
$(genH3Array[i]).next()
Adding to what #patrick dw said: once you get the right selector, you can use the following syntax:
var getH3Array = ('#Generation_II,#Generation_III,#Generation_IV').parent().each(function() {
$(this); // this references the dom element matched, so:
if($(this).next().attr("align") == "center") {
// do something here
}
});
I think what you want is
var array = $("#c1, #c2, #c3").parent();
$.each(array, function(){
console.log($(this).next());
});
In $.each callback, the this variable point to the current element. If you are iterating through a jquery array like what you have, it will be iterating through the dom elements not jQuery objects, so you need to get the jQuery objects corresponding to them by using $(this).
jQuery.each
I was writing a "pluginable" function when I noticed the following behavior (tested in FF 3.5.9 with Firebug 1.5.3).
$.fn.computerMove = function () {
var board = $(this);
var emptySquares = board.find('div.clickable');
var randPosition = Math.floor(Math.random() * emptySquares.length);
emptySquares.each(function (index) {
if (index === randPosition) {
// logs a jQuery object
console.log($(this));
}
});
target = emptySquares[randPosition];
// logs a non-jQuery object
console.log(target);
// throws error: attr() not a function for target
board.placeMark({'position' : target.attr('id')});
}
I noticed the problem when the script threw an error at target.attr('id') (attr not a function). When I checked the log, I noticed that the output (in Firebug) for target was:
<div style="width: 97px; height: 97px;" class="square clickable" id="8"></div>
If I output $(target), or $(this) from the each() function, I get a nice jQuery object:
[ div#8.square ]
Now here comes my question: why does this happen, considering that find() seems to return an array of jQuery objects? Why do I have to do $() to target all over again?
[div#0.square, div#1.square, div#2.square, div#3.square, div#4.square, div#5.square, div#6.square, div#7.square, div#8.square]
Just a curiosity :).
.find() returns not an array of jQuery objects, but one jQuery object containing an array of DOM elements (a jQuery object, at it's core, is a wrapper around a DOM element array).
When you're iterating through, each element you're on is a DOM element. So, it needs to be wrapped in $(this) to become jQuery object and have access to those methods.
Also as a side note: The id attribute can't begin with a number, since it's invalid HTML you may or may not experience strange behavior, especially cross-browser (this rule applies for any invalid HTML).
No, the find method doesn't return an array of jQuery objects. You are creating a jQuery object for each element here:
console.log($(this));
If you log the value without creating a jQuery object from it:
console.log(this);
you will see that it's an element, not a jQuery object.
When you access the jQuery object as an array, you get an element. If you want a jQuery object you have to create one from the element.