This question already has answers here:
jQuery: How to get to a particular child of a parent?
(5 answers)
Closed 8 years ago.
When i click on expandable-icons-cancel I want to save a child label of form-group div.
Here is the structure:
<div class="form-group ">
<label class="" style="padding-top:10px;"> Long Title</label>
<span class="value ">
<div class="expandable">
<div class="expandable-icons">
<img class="expandable-icons-cancel" style="display:none;" src="test/cancel.png">
</div>
</div>
</span>
</div>
And function:
jQuery('.expandable-icons-cancel').click(function() {
var parentDiv = jQuery(this).parents('div.expandable'); //-works, but how can i get upper?
// How to get 2 steps upper to form-group?
// How to get get child label text of form-group and save in var?
}
You can use closest(), like this
jQuery(this).closest(".form-group");
for the label text you can do...
jQuery(this).closest(".form-group").find("label").text();
if you know label will always be a direct child of .form-group, you can use children() in place of find(). If there is a possible for multiple labels and you only want to get the first, you can place eq(0) after getting the label.
Related
This question already has answers here:
Creating an HTML collapse accordion with CSS and JavaScript
(2 answers)
Vanilla Javascript Accordion Functionality
(3 answers)
Only open one accordion tab at one time
(5 answers)
Closed 2 years ago.
I have a list of div elements, each containing a header and a body section. Only the header of each item is initially displayed, and when clicked, the corresponding body should appear below the header. When the header is clicked again, the body should disappear. The logic I use is to append/remove the class name "extended" on each list item, in order to display and hide the body section through CSS.
Now, I am trying to create a dynamic script to allow virtually infinite list entries, without having to target each item specifically, but I cannot get it to work for all items.
HTML
<div class="list-wrapper">
<div class="chapter chapter-1">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
<div class="chapter chapter-2">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
<div class="chapter chapter-3">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
</div>
JavaScript
var chapter = document.getElementsByClassName('chapter')[0];
var chapterHeader = document.getElementsByClassName('chapter-header')[0];
chapterHeader.addEventListener("click", function(){
chapter.classList.toggle("extended");
});
The code above works fine for the first item but obviously not for the rest. Any ideas ? I'm interested in vanilla JavaScript code. Thanks in advance.
You need to use method forEach() to work with a collection of classes. And also method closest(), which allows you to refer to the specified parent of the current element.
Try this it code:
let chapterHeader = document.querySelectorAll('.chapter-header');
chapterHeader.forEach(function(chapterHeader_current, index) {
chapterHeader_current.addEventListener('click', function() {
let current_chapter = this.closest('.chapter');
current_chapter.classList.toggle("extended");
});
});
Event bubbling is the keyword.
Add only one event to the container. When you click on the container it first handles the inner element and then the outer elements.
let list = document.getElementById("myList");
list.addEventListener("click", function(event) {
// Do stuff with target
console.log(event.target.className);
})
<div id="myList" class="list-wrapper">
<div class="chapter chapter-1">
<div class="chapter-header">Chapter header 1</div>
<div class="chapter-body">Chapter body 1</div>
</div>
<div class="chapter chapter-2">
<div class="chapter-header">Chapter header 2</div>
<div class="chapter-body">Chapter body 2</div>
</div>
<div class="chapter chapter-3">
<div class="chapter-header">Chapter header 3</div>
<div class="chapter-body">Chapter body 2</div>
</div>
</div>
something like this i believe
chapterHeader.addEventListener("click", function(this){
this.nextSibling.classList.toggle("extended");
});
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 5 years ago.
I want to know what javascript code I can use to edit the text of this word?
This is not a duplicate because this has multiple divs in a div. And the target word is located in a div that is inside the more divs.
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
It's the 1st element that has this class...
document.getElementsByClassName('word')[0].innerHTML='Goodbye';
It's the 5th element that has this tag...
document.getElementsByTagName('div')[4].innerHTML='Goodbye';
You can use next code:
document.querySelector('.word').textContent = 'Hello World!';
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
But if you has few elements with class word, function 'querySelectror fining only first element'.If you need get many elements, you can use document.querySelectorAll --- is HTMLCollection (not array).
I don't recommend to use getElementByClassName - is very slowly method.
Method getElementsByTagName -faster that querySelectorAll , but it use only tagName. getElementById -is the fastest menthod finding of elements.
But that method find only first element with current ID.
This question already has answers here:
How can I find elements by text content with jQuery?
(8 answers)
Closed 6 years ago.
I have a kind of unique need of finding one div on all divs with same class name that has a specific copy, and return the entry number:
<div class="alertme"></div>
<div class="alertme"></div>
<div class="alertme">This text</div>
<div class="alertme"></div>
So it would return 2, being 0 is the first div.
I'm not sure if that what you want, but to get the index of the div that has the This text text you could use :contains selector with .index() method :
$('.alertme:contains("This text")').index();
Hope this helps.
console.log($('.alertme:contains("This text")').index());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertme"></div>
<div class="alertme"></div>
<div class="alertme">This text</div>
<div class="alertme"></div>
This question already has answers here:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.
This question already has answers here:
Switching a DIV background image with jQuery
(14 answers)
Closed 8 years ago.
I have created a parent div. Inside that div there are multiple child divs: the first one is holding a background image, the second one, the website name, and the third one, some text.
Using jQuery, when a user hovers on the second div, i.e. website name div, the third div i.e text div is visible.
Now what I want is, when the text div becomes visible, to also replace the image in the first div. Here is my HTML and jQuery code so far:
HTML:
<div class="layer-3" style="opacity: 1;">
<a href="#">
<div class="contentImg3">{Div holding the image as a background}</div>
<div class="contentBlock3" style="opacity: 1;">
<span class="btn-block">
<span class="help-block webHdln">Website Name</span>
</span>
</div>
<div class="contentText3">text Div</div>
</a>
</div>
<!-- .layer-2 ENDS -->
JS:
$(".contentBlock3").mouseenter(function () {
$('.contentText3').fadeIn(1500);
$('.contentImg').css("background-image", "images/gurus_bw.jpg)");
$('.contentImg').css("background-position", "top 30px)");
});
The CSS line is not working... What am I doing wrong ?
change
$('.contentImg').css("background-image", "images/gurus_bw.jpg)"); // miss: url(..
to
$('.contentImg').css("background-image", "url(images/gurus_bw.jpg)");
read CSS background-image Property