I have this piece of HTML code.
<div class="row member-item">
<div class="col-md-3"><img src={{ i.mem_imgurl }}></div>
<div class="col-md-2">姓名<br><div class="mem_name">{{ i.mem_name }}</div></div>
<div class="col-md-2">组别<br><div class="mem_group">{{ i.mem_group }}</div></div>
<div class="col-md-2">年级<br><div class="mem_year">{{ i.mem_year }}</div></div>
<div class="col-md-1"><button class="btn btn-danger btn-sm deleteNode" onclick="delNode(this)">Delete</button></div>
</div>
And I write js as follows,
function delNode(btn) {
var mem_item = $(btn).parent().parent();
var mem_name = $(mem_item).children("div.mem_name").text();
alert(mem_name);
console.log(mem_name);
mem_item.hide()
}
I want to get the text value of div.mem_name, but somehow it just does not work:(
The children function only travels down the immediate children of the element. You can use find to search down the tree of children. This should work:
var mem_name = $(mem_item).find("div.mem_name").text();
This is from the jQuery children() documentation:
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.
Similarly, your parent().parent() call can be replaced with closest() or parents():
var mem_item = $(btn).parents(".member-item");
You can use .closest and .find together
Script :
$(document).ready(function(){
$(".deleteNode").click(function(){
var mem_name = $(this).closest('.row').find('.mem_name').text();
alert(mem_name);
console.log(mem_name);
});
});
HTML :
<div class="row member-item">
<div class="col-md-3"><img src=""></div>
<div class="col-md-2">姓名<br><div class="mem_name">name</div></div>
<div class="col-md-2">组别<br><div class="mem_group">mem_group</div></div>
<div class="col-md-2">年级<br><div class="mem_year">mem_year</div></div>
<div class="col-md-1"><button class="btn btn-danger btn-sm deleteNode" >Delete</button></div>
</div>
JSFIDDLE DEMO
Related
I have tried this but didn't know whats wrong with it. Results undefined
$(document).ready(function() {
$("img").click(function(event) {
var test = $(this).parent('.parentClass').closest('.headingLink').attr('href');
console.log("testing this", test);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentClass">
<div class="link__img">
<img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" />
</div>
<div class="content">
<a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com">
<h4>some head</h4>
</a>
<p>hdgajsfjghasjfh</p>
</div>
</div>
.closest() traverse up the DOM tree. What you are looking for is .find(). Also you are using .parent() which traverses up one level. Use .closest() instead.
$(document).ready(function() {
$("img").click(function(event) {
var test = $(this).closest('.parentClass').find('.headingLink').attr('href');
console.log("testing this", test);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentClass">
<div class="link__img">
<img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" />
</div>
<div class="content">
<a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com">
<h4>some head</h4>
</a>
<p>hdgajsfjghasjfh</p>
</div>
</div>
You can use parents instead of parent and use find to get the child.
.parents() - Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
.find() - Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Example:
$(document).ready(function() {
$("img").click(function(event) {
var test = $(this).parents('.parentClass').find('.headingLink').attr('href');
console.log("testing this", test);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentClass">
<div class="link__img">
<img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" />
</div>
<div class="content">
<a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com">
<h4>some head</h4>
</a>
<p>hdgajsfjghasjfh</p>
</div>
</div>
closest() is just for searching in parents not in childrens. You're searching in childrens so use find() instead of closest().
parent([selector]) only traverses up one level, and closest(selector) only traverses up. Instead, I think you should use closest('.parentClass') and then use closestParentClass.find('.headingLink').
Edit: #Kalimah has a more detailed (with code) explanation.
$(document).ready(function() {
$("img").click(function(event) {
var test = $(this).closest('.parentClass').find('.headingLink').attr('href');
console.log("testing this ", test);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentClass">
<div class="link__img">
<img alt="ffdbb" class="article-link__imgSrc" src="img.jpg" />
</div>
<div class="content">
<a class="headingLink" target="jakfhaf" alt="somethingf" href="www.google.com">
<h4>some head</h4>
</a>
<p>hdgajsfjghasjfh</p>
</div>
</div>
The .closest and .find selectors are complements of each other and
used together are the best way to get to the corresponding element of
where the click (or any event) occurred.
The .closest selector traverses up the DOM to find the parent that
matches the conditions where as the .find selector traverses down
the DOM where the event occurred, that matches the conditions.
var test = $(this).closest('.parentClass').find('.headingLink').attr('href');
Replacing your code with this line of code should work for your problem.
I'm trying to get the text of some div within the parent div where button is clicked. This is an example code
<div class="parentDiv" >
<div id="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div id="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Here parentDiv is repeated couple of times and text of divToFind is different in each parentDiv. Whenever remove button is clicked within the parentDiv I want to get the text of divToFind.
I have tried this
$(this).closest('.parentDiv').children('#divToFind').text();
But nothing is returned
Don't use same IDs in a single document. You should use classes instead. With class, it works fine.
It is mentioned in the spec that there must not be multiple elements in a document that have the same id value.
$(function(){
$("button").on("click", function(){
var t = $(this).closest('.parentDiv').children('.divToFind').text();
console.log(t);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text</div>
<div class="btn-group">
<button class="button" type="button" >Remove</button>
</div>
</div>
<div class="parentDiv" >
<div class="divToFind" style="display:none">text2</div>
<div class="btn-group">
<button class="button" type="button">Remove</button>
</div>
</div>
Yes, Its true, you should not use same Id for 2 elements in an HTML document, However following is the code that can help you to get the text of the div given.
There are 2 ways:
$(this).parent().prev('#divToFind').text();
$(this).parent().prev().text();
prev and next allows us to traverse on the same level. You can provide selectors inside that to get particular element.
In your example its ID, you can update Id to some css class, so that you dont have to have elments with same ID.
Title is pretty much self explanatory...
Here is my code :
<div id=player>
<div class="button hand">►</div>
<div class=time>00:00/00:00</div>
<div class="timeline hand"><span class="now hand"></span></div>
</div>
I want to be able to get the <span class="now hand"></span> which is in between <div class="timeline hand"></div> via querySelector
var now=document.querySelector('#player>_____________.now.hand');
I'm also thinking if there is more convenient way to pick object from the relative id by children(s) or sibling(s) number instead of using id or class name.
You use a standard descendant selector (a space between #player and .now.hand):
var text = document.querySelector("#player .now.hand").innerHTML;
var p = document.createElement('p');
p.innerHTML = "Text is '" + text + "'";
document.body.appendChild(p);
<div id=player>
<div class="button hand">►</div>
<div class=time>00:00/00:00</div>
<div class="timeline hand"><span class="now hand">text in now hand</span></div>
</div>
I'm also thinking if there is more convenient way to pick object from the relative id by children(s) or sibling(s) number instead of using id or class name.
If this is in an event handler (or anywhere else you start out with a reference to some element), yes, you can use parentNode to find a parent (or repeatedly to find an ancestor), you can use querySelector on an element to only look within it, etc.
So for example:
document.body.addEventListener("click", function(e) {
var targetClass = e.target.className;
if (/\bbutton\b/.test(targetClass) && /\bhand\b/.test(targetClass)) {
alert(e.target.parentNode.querySelector(".now.hand").innerHTML);
}
}, false);
.button.hand {
color: blue;
font-weight: bold;
}
.now.hand {
color: green;
}
<div>
<div class="button hand">Click me</div>
<div class=time>00:00/00:00</div>
<div class="timeline hand"><span class="now hand">First hand</span></div>
</div>
<div>
<div class="button hand">Click me</div>
<div class=time>00:00/00:00</div>
<div class="timeline hand"><span class="now hand">Second hand</span></div>
</div>
<div>
<div class="button hand">Click me</div>
<div class=time>00:00/00:00</div>
<div class="timeline hand"><span class="now hand">Third hand</span></div>
</div>
Your span does not have any siblings. The easiest way to select it here would be document.querySelector('.now.hand') (Did you mean to apply two classes to the span? If not, connect them w/ a hyphen to use one class)
If you want to specify the span that is a descendant of the player, this would work:
js
document.querySelector('#player span.now.hand')
Learning to use CSS selectors will help here.
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2">Click me</div>
<div class="Level3">Information</div>
</div>
jQuery
$('.Level2').click(function(){
$('.Level2').closest('.Level3').fadeToggle();
});
I wanted to select the closest level3 to fadeIn and fadeOut, but doesn't work. Is my syntax wrong? online Sample :http://jsfiddle.net/meEUZ/
Try .next() instead of .closest() that traverses through the ancestors of the DOM element.
Working Demo
Also you should use $(this) rather than $('.Level2') else it'll select ALL the .Level2 rather than the clicked one.
You can also go for something like this - $(this).closest('.wrap').find('.Level3').fadeToggle();.
jQuery's .closest() method doesn't select sibling selectors, but parents. Looks like you're looking for the .siblings() method.
$('.Level2').click(function(){
$(this).siblings('.Level3').fadeToggle();
});
closest travels up the dom tree. it won't find something thats a sibling. you can use a find on a parent to achieve this
$('.Level2').click(function(){
$(this).parent().find('.Level3').fadeToggle();
});
Yes, There are many method avaiable in Jquery to find closest of the DOM element
$('.Level1').click(function(){
$(this).next('.Level3').fadeToggle();
});
$('.Level2').click(function(){
$(this).closest('.wrap').find('.Level3').fadeToggle();
});
$('.Level4').click(function(){
$(this).parent().find('.Level3').fadeToggle();
});
$('.Level5').click(function(){
$(this).siblings('.Level3').fadeToggle();
});
.level{background:Red;width:200px;height:40px;}
.Level3{background:blue;width:300px;height:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="Level1 level">Click me()sing next)</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level2 level">Click me(Using closest)</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level4 level">Click me(Usingh Parent)</div>
<div class="Level3">Information</div>
</div>
<div class="wrap">
<div class="Level5 level">Click me(Using Sibiling)</div>
<div class="Level3">Information</div>
</div>
Yes! closest starts the DOM search from the selector you pass to it, and goes upwards the DOM hierarchy, searching through the parents/ancestors. Use siblings or next instead.
Like this:
$('.Level2').click(function(){
$(this).siblings('.Level3').fadeToggle();
});
Get a clear idea from the following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".add").on("click", function () {
var v = $(this).closest(".division").find("input[name='roll']").val();
alert(v);
});
});
</script>
<?php
for ($i = 1; $i <= 5; $i++) {
echo'<div class = "division">'
. '<form method="POST" action="">'
. '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
. '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
. '</form></div>';
}
?>