I would like to change a text in a div if another div has a specific attribute, in my case data-value.
In the specific if a div has an attribute data-value="cars" another div should have the text "Buy".
In the specific if data-value="cars" I would like to change the text "1" into "Buy"
<div class="one">1</div>
Here the sample code
<div class="dynamic">
<div class="content">
<div data-value="cars">
Cars
</div>
<div data-value="truck">
Truck
</div>
<div data-value="moto">
Moto
</div>
</div>
</div>
<div class="change">
<div>
1
</div>
<div>
2
</div>
</div>
How can I achieve that in JS?
you need to first perform a query on the existence of any element within the content having the data-value attribute of "cars"
use the document.querySelector() function
if (document.querySelector('.dynamic .content [data-value="cars"]')) ...
then you need to set the text content of all the div elements within the change that have the value 1, using the .textContent attribute
document.querySelectorAll('.change div')
.forEach(div => if( div.textContent=="1") div.textContent="Buy");
putting all pieces together
if (document.querySelector('.dynamic .content [data-value="cars"]')) {
document.querySelectorAll('.change div')
.forEach(div => if(div.textContent=="1") div.textContent="Buy" );
}
Related
I want to find the matching "identifier" and then add a class to the div with classname "two", for example "found".
html example
<div id="list">
<div class="box">
/* Part ONE */
<div class="one">
<div class="one_one">
<span class="identifier">1234</span>
</div>
</div>
/* Part TWO */
<div class="two"></div>
</div>
...
</div>
I tried:
var identifier = $("#list").find(".box > .one > .one_one > span:contains('1234')");
if (....) {
identifier.closest(".one").addClass("found");
}
I only managed to go back to the div with the classname "one", but I need the div with classname "two" (unfortunately it is outside the parent tree of the identifier).
Traverse the DOM up to a common parent and then find the target element within that parent. For example:
identifier.closest(".box").find(".two").addClass("found");
I am trying to get url from href and paste it in background image.
The problem is that it is applying to just first div not on all div. Is this possible without giving unique classes?
HTML
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
JS
$('#main-bg').css(
'background-image', 'url(' + $('#inner-content a').attr('href') + ')'
);
JSFIDDLE: https://jsfiddle.net/pr07zymf/
An id MUST be unique to each element! Using it multiple times may work at times in CSS, though, JavaScript isn't so forgiving. The reason only the first <div> is styled is because JavaScript ignores all other elements with the same id.
You can use classes instead as shown in the example below!
Example Code:
/* Iterate over every element having the given class. */
$('.main-bg').each(function (index, element) {
/* Cache a jQuery instance of the element. */
var el = $(element);
/* Get the 'href' and assign it as the 'background-image' for each element. */
el.css('background-image', 'url(' + el.find('.inner-content a').attr('href') + ')');
});
.main-bg {color: #fff}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
When you are using HTML, please remember, the ID should always be UNIQUE.
You cannot make them the same name like "main-bg".
Solutions:
1, change their id's name to <div id ="main-bg1">, <div id ="main-bg2">, <div id ="main-bg3">, and <div id ="main-bg4">
2, use CLASS like
<div class="main-bg"> text
<div class="inner-content"> </div>
And remember, every time when you do
$('#ID')
or
document.getElementById(ID)
It will always choose the FIRST element which has this ID.
I want to use jquery to slidedown the description classes when title classes are clicked. However, what I want to do is when a specific title is clicked, only the immediate next description should slidedown. How can I do that in one block of code?
$(document).ready(function(){
$(".title").click(function(){
$(".description").slideToggle();
})
})
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
$(".description").slideToggle(); takes all elements with class=description, not just the one you want.
Use next() near the selected one title.
$(document).ready(function(){
$(".title").click(function(){
$(this).next(".description").slideToggle();
})
})
i am using IPB and i am going to put each category into a new tab the category div is something like this:
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
and my tabs content is like this:
<div class="content">
<div id="content-1" class="content-1">
</div>
</div>
and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?
<script>
document.getElementById('content-1').appendChild(
document.getElementById('category_100')
);
</script>
this worked for me but how can i add more than id to category_100
i want it to be like this in one script code so i would not repeart the scrip code four times:
<div class="content">
<div id="content-1" class="content-1">
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
</div>
</div>
using my two lines the suggested things here is not working!
Try this code :
$('div[id^="category_"]').appendTo('#content-1')
Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/
"using my two lines the suggested things here is not working!"
You just get a single element with an ID and trying to append it...
Live Demo
If you want to append multiple elements, there are many ways...
Wrap those elements and then append...
<div id="categories">
<div id='category_100'></div>
<div id='category_104'></div>
<!-- etc. -->
</div>
document.getElementById('content-1').appendChild(document.getElementById('categories'));
or add same class to all elements that you want to append...
<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>
[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
or get elements with query selector that match some pattern...
[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
and etc.
how to show last div which has same class value in all of it's parent divs.
example:
<div id='parent1' style=display:none;>
<div class='subclass1'>
<div class='subclass2'>
<div class='display_value'>Hai</div>
</div>
<div>
<div>
<div id='parent2' style=display:none;>
<div class='subclass1'>
<div class='subclass2'>
<div class='display_value'>Bye</div>
</div>
<div>
<div>
Here, I want to show div with class='display_value' under div with id='parent2' in jquery.
How can i achieve this.
$('div.display_value:last'); //will get you last div having class "display_value"
If you know that #parent2 is last parent div
$('#parent2').find('.display_value').show();
If you are not sure about that,
$('.display_value').last()
Reference
$('#parent1 > .subclass1 > .subclass2 > .display_value').show(); //Show Hia
$('#parent2 > .subclass1 > .subclass2 > .display_value').show(); //Show Bye