I'm wondering, why do some elements appear like an array and others like HTMLSpanElement. I've attached a picture as I'm not sure how to describe this otherwise.
The following log is made via
log(returner);
log(returner[0]);
Is returner a jQuery object as a result of $() ? $() will always return an array, even if there is one or zero elements inside of it. Without specifying an index in your first console.log, the entire contents of the array are outputted. In the second console.log, you include an array index, so only the element matching that index is outputted.
Because the element that appears like an array IS an array - it's an array of DOM element objects (HTMLSpanElement, etc).
When you log the first element of the array with returner[0], that element is a DOM object, so it logs it as an object.
Because (it looks like) returner is not an element, but an array of elements.
Related
I have a jQuery object array that I need to remove the 1st and last item from. I tried using shift() and pop() but it threw an error because I guess a jQuery object is not the same as an array? I then used delete however that doesn't change the length so a loop I have after this gets all kinds of messed up. Finally I found out I should use:
$item.splice(0,1) and $item.splice($item.length-1, 1)
however the object array that splice(0, 1) returns is no longer in the same order as it was previously. Is there a reason splice would return a different order?
Did you try using slice? It works with a jQuery elements collection:
$('div').slice(1, -1);
Also, you can use the above statement without changing your original array. It returns the collection, removing the first and last elements.
After doing this:
var collection = ['foo', 'bar', 'john'];
console.log(collection);
collection.splice(0,1)
console.log(collection);
I get this
Why does the Chrome console display only two elements instead of all three before the splice?
tl;dr: Because variables only hold references to objects and the console doesn't deep-clone when displaying an object.
The collection variable refers to your Array, since Arrays are Objects. In JavaScript, variables only hold references to objects.
When you mutate your collection array, the collection variable refers/points to the changed array.
When you click that small arrow icon to expand your array in the console, it reads the logged variable again; which has now changed.
The console doesn't deep-clone an object before displaying it.
the result is correct.
splice(x,y) method removes element starting from x index and y specifies number of elements to remove ie; 1 element in your case.
the thing to remember is splice alters your original array.
How can I remove all the elements with a specific tag name using Javascript. For example, I did the following:
var els = document.getElementsByTagName("center");
and it returned an array of all the center elements. How may I remove all these elements?
Coming from Remove all child elements of a DOM node in JavaScript and JavaScript DOM remove element I know that I can loop through els, find the parent of each element and then remove that specific node. But is there anyother way provided by javascript. Like we can do $('center').remove() in jquery and it removes all the elements with center tag. Anything similar to that in Javascript?
With the mention that you still loop over the elements (there is no way to avoid that), you can do this:
Array.prototype.slice.call(document.getElementsByTagName('center')).forEach(
function(item) {
item.remove();
// or item.parentNode.removeChild(item); for older browsers (Edge-)
});
DEMO: http://jsbin.com/OtOyUVE/1/edit
Some notes on slice:
document.getElementsByTagName doesn't return an array, it returns a live list with a length
property. That is why it is needed to first convert it into an array (Array.prototype.slice does that for any object with the length property). By doing that you eliminate the problem of the list being live (gets updated when you change the DOM) and you also get the other array functions to work (like forEach) which have a more functional syntax for looping.
"it returned an array of all the center elements."
Well, it returned an array-like object (a live NodeList or an HTMLCollection depending on the browser).
"How may I remove all these elements?"
You have to loop through the list removing them one at a time as you mentioned later in your question. If you find yourself doing that a lot, encapsulate the looping inside a function so that you don't have to repeat it.
"we can do $('center').remove() in jquery and it removes all the elements with center tag. Anything similar to that in Javascript?"
jQuery is a collection of JavaScript functions, so it can't do anything JavaScript can't do. jQuery's .remove() method (like most other jQuery methods) will loop internally, it just saves you having to think about it. So that comes back to what I already mentioned above, encapsulate the loop/remove code in a function so that you can use it from any part of your code.
So...I have this array:
val['an_element'][0]['another_element'][2]['text']
I want to get rid of the entire "2" node.
Now...I THOUGHT the way to do this would be:
delete val['an_element'][0]['another_element'][2];
BUT...it doesn't actually drop the element, but simply empties it out.
I also tried:
val['an_element'][0]['another_element'][2] = null;
...but that just resulted in my console log nearly bleeding it was so red with errors.
Basically, i want that [2] node to NO LONGER EXIST. Basically, I want it to NOT BE FOUND AT ALL.
What do I do??? And I know the ".splice" method will NOT actually modify the original array, so please don't suggest it. :)
The splice method will, in fact, modify the array. Just try:
val['an_element'][0]['another_element'].splice(2, 1);
From the docs:
Changes the content of an array, adding new elements while removing old elements.
...
If you specify a different number of elements to insert than the number you're removing, the array will have a different length at the end of the call.
The Linq-For-Javascript library contains functions that convert between "jQuery objects" and "Enumerable objects": toEnumerable() and TojQuery(). Consider the difference between these two lines:
$('tr'); // returns array of tr
$('tr').toEnumerable().TojQuery(); // returns array of tr[1]
Converting from jQuery to Enumerable and back to jQuery does not give you what you started with. The end result is an array of arrays of elements, with each sub-array having a length of 1. I do need to make use of Enumerable, so this is just a convenient example of my problem.
This means that to get the id of an element, you'd need to do the following:
$('tr')[0].id; // returns "myID"
$('tr').toEnumerable().TojQuery()[0][0].id; // returns "myID"
I'm surprised of this, because even though I've allegedly gone back TojQuery(), the object returned by TojQuery() does not work with typical jQuery calls:
$('tr').find('td').length; // returns 170 (in my case)
$('tr').toEnumerable().TojQuery().find('td').length; // returns 0 (BAD)
I would like it if both lines returned 170, but apparently Linq-For-Javascript doesn't work that way.
So, my questions:
Why is this?
Am I doing it wrong?
If not, any good workarounds? (convert array of 1-element arrays to array of elements?)
Thanks!
JQuery handles operations according to types. In the first line of the code, if finds all HTML TR objects and by the help of this information it can attach necessary functions to the found objects.
$('tr').find('td')
However, it could not understand after you change it to enumarable object since it is no longer seems to be a HTML Object instead it becomes any other type of object. Thus, jquery cannot attach a function to it.
$('tr').toEnumerable()