This question already has answers here:
Select element by index (multiple elements of same class)
(4 answers)
Closed 2 years ago.
Possible Duplicate:
Select element by index (multiple elements of same class)
Quick question, I'm targeting all the article elements in my html5 page using:
var articles = $("article");
What I want to do is target one of the article elements using an index only. I can't seem to get it to work, any ideas?:
articles[1].css("display", "none"); // <-- This won't work
The array is returning the DOM element rather than the jQuery object. The .css() function does not exist on the DOM element, so you can wrap it in with the jQuery $ function to create a jQuery object that you can call .css() on.
Try $(articles[1]).css("display", "none");
Demo
Edit: Or even better articles.eq(1).hide();
You can use the .eq() function to target a specific index,
$("article").eq(1).css("display", "none");
According to the jQuery documentation referenced above,
Reduce the set of matched elements to
the one at the specified index.
Try this. This should target the first article
var articles = $('article').eq(0);
articles.css({"display":"none"});
Check this out for more of an explanation but this does exactly what you need.
http://api.jquery.com/eq/
Related
This question already has answers here:
How to get element by class name? [duplicate]
(4 answers)
Get Element By Classname Script Not Working
(4 answers)
Closed 5 years ago.
Sorry for a stupid question, but maybe someone can explain it to me. On w3school web-site you can find a modal example. And in order to close the modal they use the following line of code:
HTML:
<span class="close">×</span>
Script:
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
Why to use array here? I tried this code without this array and it doesn’t work. I tried to use different indexes in this array and it also doesn’t work.
Why do we use [0] here and how does it exactly work?
According to Mozilla developer documentation, it returns an array of child elements.
Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.
In your case, you have only one DOM element having class 'close'. That's why it returns an array of one element.
Because you can assign a class to more than one element in your HTML document. getElementsByClassName does exactly that: An array of all HTML elements which got the given class assigned to them. The [0] picks the first (and in your case only) element from that array.
If you want to give an unique identifier to a HTML element, assign an id to it and use getElementById.
<span id="close">×</span>
var span = document.getElementById("close");
This question already has answers here:
Filter divs by data-attr containing string
(4 answers)
Closed 6 years ago.
I'm filtering images based on data attributes, and for each filter data attribute there can be several tag values. To match an element based on one data attribute value, you can do this:
$('.image-container').filter('[data-places="Canada"]').css('display','none');
But when I try this with a space delimited list, it doesn't work:
<div class="image-container" data-places="Nunavut Canada">...</div>
Is there any way in jquery to select by a value in a set in a data attribute?
The other option I can think of is to loop through an array of selected elements, but I've got images loading in via ajax in an infinite scroll so this array would be very bulky at some point. I'm open to non-jquery solutions as well.
You have to use attribute contains a word selector at this context,
$('.image-container').filter('[data-places~="Canada"]').css('display','none');
Attribute equals selector cannot be used here since you are searching for a particular word in the attribute. Also you can use attribute contains selector, but that would select element with attribute like data-places="NunavutCanada"> also.
This question already has answers here:
JQuery class selector vs id selector
(5 answers)
Closed 8 years ago.
HTML:
JQuery:
('.nameClass').click(myFunction);
or
('#txtName').click(myFunction);
In Jquery Which is best perform when we have 100's of control to apply this logic. And Why better perform ?
Using id selector will be fast always as it returns single element but class selector will return one or more elements.
NOTE - You must ensure that id should be unique through out the DOM.
This question already has answers here:
jquery get only all html elements with ids
(3 answers)
Closed 8 years ago.
Simple. I want to traverse the DOM and find all elements that have an id attribute. Can someone help me with a js and/or jquery script
You can query all the elements with an id attribute by using the following jQuery selector:
$("[id]")
You can also just use plain JavaScript using querySelectorAll:
document.querySelectorAll("[id]")
If you want to find non-empty id attributes, use this selector instead:
'[id]:not([id]="")'
Simple attribute selector
$('[id]');
Reference : Has Attribute Selector [name]
This question already has answers here:
How to append one jQuery element already in the DOM to another element?
(5 answers)
Closed 3 months ago.
I am writing a Greasemonkey userscript, with jQuery. The segment of code affects forum thread pages, and intends to append a button to the footer of every post.
Assume the button is already a jQuery element $button, this is the code I have:
$('table.posts').each(function() {
//get the name of the poster
profileName = $(this).find('.user').text();
//change the link relative to each poster
$button.attr('href', '/search?user=' + profileName);
//This is the problematic line:
$(this).find('div.postFooter').append($button);
});
I have tested the value of profileName using an alert, and it successfully iterates through and alerts the profile names, but it only appends the button to the last post's footer (with the correct link).
I've tried using a variety of different selectors and ways to traverse the DOM to the required element, but all methods have resulted in the same thing. I'm out of ideas.
Use clone:
$(this).find('div.postFooter').append($button.clone(true));
Everytime you are changing and appending the same $button element.