I want to specifically change the innerText of the "quantity" div from this HTML:
<div class="shop" id="shop">
<div id="1" class="item"> // Div nr. 1
<div class="details">
<div class="buttons">
<div id="1" class="quantity"> // <-- Don't change this one!
</div>
</div>
</div>
<div id="2" class="item"> // Div nr. 2
<div class="details">
<div class="buttons">
<div id="2" class="quantity"> // <-- Change this one!
</div>
</div>
</div>
</div>
I tried using document.querySelector('.quantity').innerText = "". But that only changes the first occurring div with the class "quantity", which is within "Div nr. 1".
How do I specifically target the "quantity" class within "Div nr. 2"?
Given the html you provided, you can select the second .item and then descend to its .details like so:
document.querySelector('.item:nth-child(2) .quantity').innerText="";
https://jsfiddle.net/6L8gntmh/
It would be wise to make the id`s unique if you have access to the html. Then you would be able to select by their id.
You can use querySelectorAll this allows you to modify HTML elements based on class and id not just one of each.
document.querySelectorAll('.quantity')[1].innerText = "my text"
Depending on your specific situation, it might be more useful to use a different type of selector:
document.querySelector('#id2 .quantity').innerText = ""
All ids must be unique and can start with a number, but it's a pain to select, I would recommend starting your id with a letter instead.
Related
So I have something like this in my html:
<div id="basket">
<div id="item">Apple</div>
</div>
<div id="basket">
<div id="item">Orange</div>
</div>
<div id="basket">
<div id="item">Banana</div>
</div>
// And so on
How would I be able to change the innerHTML of each 'item' div individually?
For example, how would I change the div that says 'banana' to something else?
As already mentioned within the comments, an ID has to be unique so you have to change them to classes.
Then to solve your issue, you can use querySelectorAll to select all elements with the class item. Then you sue the forEach-loop and check the innerHTML of every Element. if it matches "Banana" you can rewrite the innerHTML (should use textContent though for security reasons):
document.querySelectorAll('.item').forEach(el => {
if (el.textContent == 'Banana') {
el.textContent = 'The Minions ate the Banana';
}
})
<div class="basket">
<div class="item">Apple</div>
</div>
<div class="basket">
<div class="item">Orange</div>
</div>
<div class="basket">
<div class="item">Banana</div>
</div>
I have a javascript variable (ex: myElement), that holds a div with class name myClass like shown below.
<div>
<div class="myClass">
<h1>My Div</h1>
<div id="1">Div one Content</div>
<h2>Headline two</h2>
<div id="2">Div two Content </div>
</div>
<div class="myClass">
<h1>My Div</h1>
<div id="1">Div one Content</div>
<h2>Headline two</h2>
<div id="2">Div two Content </div>
</div>
</div>
I want to add an attribute (ex: data-index) to the div having class 'myClass' through jascsript or jQuery so that it could look like this:
<div>
<div class="myClass" data-index="index1">
<h1>My Div</h1>
<div id="1">Div one Content</div>
<h2>Headline two</h2>
<div id="2">Div two Content </div>
</div>
<div class="myClass" data-index="index2">
<h1>My Div</h1>
<div id="1">Div one Content</div>
<h2>Headline two</h2>
<div id="2">Div two Content </div>
</div>
</div>
How can you achieve this?
Please note: I have this div in a javascript variable called myElement and the following code
myElement.attr('data-index','index')
does not work.
Update:
I could try like First appending the div stored in variable myElement to the DOM, then add the attribute:
$('div.myClass').attr('data-index','index');
but the problem is in the DOM I have like 100s of div with the class myClass.
well, the better way is you create the attributes while you are creating HTML.
But you can do what you want using jquery iterate function (Jquery.each): http://api.jquery.com/jquery.each/
var myElements = $('div.myClass'),
i = 0;
$.each( myElements , function( i ) {
$(this).attr('data-index','index'+(i+1));
});
Try this:
var newAttr = document.createAttribute("data-index");
newAttr.value = "[What you want the index to be]";
// Will set data-index for first .myClass in newElement
newElement.getElementsByClassName("myClass")[0].setAttributeNode(newAttr);
// Will set data-index for every .myClass in newElement
newElement.getElementsByClassName("myClass").map(function(node) {
node.setAttributeNode(newAttr)
});
This is my HTML:
<div class="content-box" id="enabled_add">
<h2 class="title">hallo</h2>
<div class="content-box-heading-orange"></div>
<div class="content-box-content">
Hallo
</div>
</div>
<div class="content-box" id="enabled_add">
<h2 class="title">hallo2</h2>
<div class="content-box-heading-orange"></div>
<div class="content-box-content">
Hallo2
</div>
</div>
This is my JS
$('#usernav_close').click(function(){
setTimeout(function(){
$('#enabled_add').fadeOut('slow');
});
});
I want to get all of the content-boxes with the id enabled_add to FadeOut.
But my problem is that only the first element is selected.
ids must be unique. If you try to reuse an id, only the first will be found/updated by jQuery. You want to use a class here.
<div class="content-box enabled_add">
<h2 class="title">hallo</h2>
<div class="content-box-heading-orange"></div>
<div class="content-box-content">
Hallo
</div>
</div>
<div class="content-box enabled_add">
<h2 class="title">hallo2</h2>
<div class="content-box-heading-orange"></div>
<div class="content-box-content">
Hallo2
</div>
</div>
$('#usernav_close').click(function(){
setTimeout(function(){
$('.enabled_add').fadeOut('slow');
});
});
The id attribute is supposed to be unique to an element on a page. You aren't supposed to use the same id twice in one document.
The difference between ids and classes
You can however give an element more than one class.
<div class="content-box enabled_add">
That would mean your selector would read
$('.enabled_add')
Sorry for the poor title, I'm not sure how to word this issue.
I need some help writing a jQuery or javascript selector to get every childBlock that isn't the first. There are N number of parentBlock divs with at least one childBlock div child. We would like to change some of the labels for every subsequent child div after the first. What is the most efficient way to select these elements?
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='1'>
</div>
<div class="childBlock" id='2'>
</div>
<div class="childBlock" id='3'>
</div>
<div class="childBlock" id='4'>
</div>
...
</div>
</div>
<div>
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='5'>
</div>
<div class="childBlock" id='6'>
</div>
<div class="childBlock" id='7'>
</div>
<div class="childBlock" id='8'>
</div>
...
</div>
</div>
<div>
So in the example above, I would like to select childBlocks with an id of 2, 3, 4, 6, 7, 8. In my actual code, these div's don't have an id, they are just classed if that makes a difference at all.
I've tried:
$(".parentBlock").find(".childBlock").not(':first').find('label.category ').text("Subcategory");
But it seems to find the first childBlock on the screen, skip over it, then apply the text change to every other childBlock div that it finds.
Thoughts, or suggestions?
You were very close. You want first-child, not first:
http://jsfiddle.net/pMYWS/
$(".parentBlock").find(".childBlock").not(':first-child').text("Subcategory");
(I am assuming that label.category is something present in your real code that isn't shown in this demo snippet)
what about something like this?
$(".childBlocks:not(:first-child)") (do something here)
I have a requirement to change the id of a form element dynamically. For example, the elements are in a sequence in form like id1, id2, id3 and id4 (the number of elements is not fixed to 4 and can be more than that). I need to add an element after id1 as id2. when this happens, the id2 which already in the form should change as id3 and id3 should change as id4 and so on. I thought of putting it in a recursive function with javascript but didn't get any idea as of now....Please help.
With jquery you can do this:
You have some html tags with class "listItem" and an id.
<div id="1" class="listItem">something </div>
<div id="2" class="listItem">something </div>
<div id="3" class="listItem">something </div>
Then the script
var i = 2;
$(".listItem").each(function() {
$(this).attr("id", i++);
});
This should change the content to
<div id="2" class="listItem">something </div>
<div id="3" class="listItem">something </div>
<div id="4" class="listItem">something </div>
This will iterate through all tags that have class "listItem" and will change the id.
I hope that helps.
Lets say your html was like this:
<div id="id1" class="list"></div>
<div id="id2" class="list"></div>
<div id="id3" class="list"></div>
You can create a function that inserts a new element in the middle and updates the ids of all the following elements in two steps as follows:
function(insertAfterId) {
jQuery('#' + insertAfterId).insert('<div id="temp" class="list"></div>');
var count = 1;
jQuery('.list').each(function() {
jQuery(this).attr("id", "id" + count);
count++;
});
}
Hope that helps!