I have the following code:
$('#select_albums').load(document.location.href + "&action=get_albums");
But this is only replacing only the first found div with the id #select_albums from DOM. How do I replace all divs with an id?
Every item in the DOM has a unique id. If you want to act on many divs at the same time use a class $(".myclass") or a tag $("div") selector.
Yes because by definition an element ID can only appear once on a page. If you have more elements use a class instead.
$('.select_albums').load(document.location.href + "&action=get_albums");
With
<div class="select_albums"></div>
<div class="select_albums"></div>
id's must be unique, try using a class instead such as $(".albums").load...
ids must be unique
Related
I have an HTML like this
<div class="this">
EXP
</div>
I want to add id to <a>. But do not know what to do.
First select your element using something like .getElementsByClassName(). Keep in mind that .getElementsByClassName() returns a NodeList collection of elements, so you'll want to access the first index (or loop over them). You can then simply set the ID with .id, as the ID is merely a property of an element.
This can be seen in the following:
const element = document.getElementsByClassName('this')[0];
element.id = 'element';
console.log(element);
<div class="this">
EXP
</div>
If you want to add this with Javascript, you'll need to use a selector to target your <a> tag and then set the id attribute on it. You can do this by using the querySelector() function or as seen below:
// Find an <a> tag that occurs below a class called "this" and set its id attribute
document.querySelector('.this > a').id = "some-id";
There are many other available functions to handle this through native Javascript and other frameworks, so your milage may vary depending on what you are using.
Example
In this example, we have provided some CSS that should only apply to an element with an id of "test" and we'll run the necessary code to show that the id is being added to the element (as it will be red):
document.querySelector('.this > a').id = 'test';
#test { color: red; }
<div class="this">
EXP
</div>
Add the id attribute to the <a> tag. See the differences of the middle line:
<div class="this">
<a id="expid" href="exp.com">EXP</a>
</div>
I am doing a school project and it's my first time using JS, and we are not allowed to use any ID's for css styling, but on some event that the user does I want to change the style of a div in the page:
HTML:
<div class="ads">
...
</div>
CSS:
.ads{
display:block;
//and some other style properties
}
and when the user do the event I want to change the display property into :
display : none;
I know how it can be done using ID for the element, but how can it be done only by a class name?
I would like to be able to do it something like this:
document.getElementsByClassName('ads').style.display=none;
Thank you.
If you know that there is only one element with that class, use the first element of the NodeList that document.getElementsByClassName returns:
document.getElementsByClassName('ads')[0].style.display = 'none';
document.getElementsByClassName('ads')[0].style.display ='none';
If you have just a one element with class"ads", you can use:
document.querySelector('.ads').style.display='none'
Else, if you have more than one element you can add a unique class name for you element like this
<div class="ads foo">
and using document.querySelector('.foo').style.display='none'
for changing it's style.
You should put index, also the string after the equal sign must be with quotation marks, like below:
document.getElementsByClassName('ads')[0].style.display="none";
w3schools
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.
I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()
I'm trying to implement the jQuery toggle item in my Rails 3.2.1 app.
I would like the toggle to work for each individual <li> item on the <ul>, so I can target which element to hide/show individually. But for some reason, only the top element has the toggle effect; the rest are not responding.
Here's the jsFiddle.
Can anyone explain why this is happening?
It’s because your divs all have the same id, which is invalid HTML. Since the DOM is only expecting there to be one element with any given ID, then when you write $("#trigger"), it only selects the first one it finds. Change the ID to a class.
<div class="trigger"> ...
And change your ID selector to a class selector.
$('.trigger').click(/* ... */);
jsFiddle
ID attributes must be unique on the page. Change all the id="trigger" to class="trigger" then try:
$(".trigger").click(function (){
$(this).find('.menu-item').toggle();
});
JSFIDDLE
$(".trigger").click('.menu-item', function () {
$(".menu-item", this).toggle();
});
Multiple elements with the same id is invalid HTML, and jQuery will only target the first that it finds with that id.
I updated your fiddle to use a class instead of ids
<div id="trigger" class="trigger">
Then:
$(".trigger").click(function (){
$(".menu-item", this).toggle();
});
to target the class and not the id.
Why do the elements have the same ids? An ID should be unique. If you want to select all the <li>s, use a CSS selector like $(".toggle-li").
I have multiple instances of a div with an id of "myDiv" on a page. I want to replace the contents of these divs. When I use this javascript:
function replaceContent(id, content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
replaceContent('myDiv', 'hello there');
<div id="myDiv"></div>
<div id="myDiv"></div>
<div id="myDiv"></div>
It only replaces the content inside one of those divs and not all of them. If I use the .html() function of jquery instead, it replaces the contents of all divs. Is there any way I can get the above js to work in the same way?
id values must be unique - you can't have more than one id with the same name and update all of them.
I have multiple instances of a div with an id of "myDiv" on a page.
This is where you're doing it wrong. You cannot assign an ID to multiple elements on a page - it has to be unique.
It only replaces the content inside one of those divs and not all of them.
This happens because getElementById() returns only the first-matched element in case multiple such elements are matched.
To solve this, assign a class instead of an ID to the divs you want to target, and if you can use jQuery, use this instead (assuming class="myDiv"):
function replaceContent(className, content) {
$('div.' + className).html(content);
}
// This appends className so the selector becomes $('div.myDiv')
replaceContent('myDiv', 'hello there');
IDs have to be unique. You can use the same class name for all divs and then use a css selector.
<div id="div1" class="mydivs">blah</div>
<div id="div2" class="mydivs">blah123</div>
For e.g. In JQuery, you could do:
$('.mydivs').html("whatever");