With this $("div.modal-window.modal-progress a") selection I get two elements:
How to get the first selected object from the group and display it own property?
I tried this console.log($("div.modal-window.modal-progress a")[0].baseURI) but I get undefined.
Each of the selected in the set has baseURI:
And how one is able to iterate over all in the set?
$("div.modal-window.modal-progress a:first")
might just do it. Do post more of your code though so we can see the structure.
Use first() function of JQuery as
$("div.modal-window.modal-progress a").first()
Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first element in that set.
$("div.modal-window.modal-progress a")[0] should get you the first item.
You get an undefined result because the property baseURI might not be defined in the first element.
If you want to get a jQuery object from the first selection, you can wrap the selected element by a $ like this:
$($("div.modal-window.modal-progress a")[0])
EDIT: After the OP changed his question:
You might want to use jQuery.each to iterate over all the elements that match your selector.
$("div.modal-window.modal-progress a").each(function() {
console.log($(this).prop("baseURI"));
});
Related
Hi I have an array called "arrayRestado1" from which I want to extract the first element and save that value in the value property of an html input. If it extracts the value but, it does not find the input with that class so the input does not show anything.
The code is in JavaScript:
const col1_f1 = document.getElementsByClassName("col1_f1").value = arrayRestado1[0]
console.log(col1_f1)
the function document.getElementsByClassName() returns an array of elements (an HTML Collection to be correct), not only a single DOM element.
Here's the documentation: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
So with your current code you could try this:
const col1_f1 = document.getElementsByClassName("col1_f1")[0].value = arrayRestado1[0]
console.log(col1_f1)
See the [0] after the function? This means we want the first element of the array. Doesn't matter if there is only one with the given class name col1_f1.
Otherwise you could give your inputs/elemets specific (unique) ids and then use the document.getElementById() function to get them as single elements "directly" in the first place.
More on that here: https://www.w3schools.com/jsref/met_document_getelementbyid.asp
Have a good day!
Nico
For some reason, when I implement the d3 each() function it only acts upon the first item in an array. For example, in the following function, only the user ID of the first user in the array is alerted:
https://jsbin.com/hayedeh/edit?html,js
What am I missing here?
Using selectAll instead of select will iterate the entire array. That said, you need to read up on selections. This is an odd use case (selecting an array). It's meant to be used with selectors or node elements to traverse collections of DOM elements. I see little need to use it to traverse regular arrays. Just use good old fashioned array methods.
U can do forEach like this:
users.forEach(function(user)
{
alert(user.userID);
});
How to can I treat the return value of jQuery functions that would return a bunch of DOM elements. E.g. I'm using the .nextAll() function, that returns a bunch of elements, does it? Can I store the return value in a JS array? Sooner or later I want to iterate through those elements. I know there's the jQuery .each() function that would help me out here. Nevertheless, for training and understanding issues I first want to do it step by step.
I'm pretty sure, this basic question is answered somewhere, but I searched for an answer and did not find anything useful for me. Maybe I didn't find the right words. So please be kind.
jQuery functions typically returns a bunch of DOM elements, it masquerades as an array.
If you run something like:
$('p').css('background-color', 'red');
jQuery will build an array of all p elements, and then applies the css() function to each of them.
If you want a single DOM item, use get with an index:
$( "li" ).get( 0 )
So, .nextAll() also typically returns a number of elements, so it is behaving just like jQuery typically does.
each() is a handy-dandy function that operates on arrays, so it will of course operate just fine on jQuery objects:
$('li + li').nextAll().each(function(i){
//glorious code
});
You could also do this:
var nexts = $('li + li').nextAll();
$.each(nexts, function(i){
//Glorious code!!
});
Hope that makes things clearer!
You can just assign it to a variable:
var $els = $(selector).nextAll();
This way, $els will be a jQuery wrapper (array-like object) of the elements.
If you want to have an array of the elements instead, you can use
var arr = [].slice.call($els);
As the documentation of .nextall() says, it returns jQuery
A jQuery object contains a collection of Document Object Model (DOM)
elements that have been created from an HTML string or selected from a
document. Since jQuery methods often use CSS selectors to match
elements from a document, the set of elements in a jQuery object is
often called a set of "matched elements" or "selected elements".
The jQuery object itself behaves much like an array; it has a length
property and the elements in the object can be accessed by their
numeric indices [0] to [length-1]. Note that a jQuery object is not
actually a Javascript Array object, so it does not have all the
methods of a true Array object such as join().
If I call
$(".myClass")
I get an array of elements. If I now want to get the first element as jquery element I would do something like this:
$($(".myClass").get(0))
So I wrap the DOM-Element, which I get from the array again with the jQuery operator. Is there a more elegant way to do this? Some get method, which returns a jQuery element for example?
Use the eq() method:
$(".myClass").eq(0)
This returns a jQuery object, whereas .get() returns a DOM element.
.eq() lets you specify the index, but if you just want the first you can use .first(), or if you just want the last you can use (surprise!) .last().
"I get an array of elements."
No you don't, you get a jQuery object which is an array-like object, not an actual array.
If you plan to use jQuery much I suggest spending half an hour browsing through the list of all methods.
Or use the each method to traverse.
$(".myClass").each(function () {
console.log($(this).html())
})
Relevent jsFiddle: http://jsfiddle.net/julianlam/eLs9E/
For some reason, given the dataset shown in the fiddle, when I try to grab all of the elements with the data-interest-id property, among the seven li elements, I get the Number "7" as well.
The two are related, as if I add another li element, the number is "8".
Any particular reason this is happening?
The object returned from .getElements, in addition to its results, includes a length property.
When use the Object.each() function you iterate through all the properties. For example: If you change the .each to
Object.each(meh, function(element, key) {
console.log(element+"-"+key);
});
You'll see that the console.log() within the each() function will show "length" as its key whereas the rest will have an index.