[英]How to get the value of an element located in the parent element by class name
I want to find the value of an element that is located in the parent, using the element's class name.我想使用元素的类名查找位于父元素中的元素的值。
Below is my code that has a button in the same parent as the element I want to find, but when I click it I get "undefined".下面是我的代码,它在与我要查找的元素相同的父级中有一个按钮,但是当我单击它时,我得到“未定义”。
$(document).on('click', '.four', function(){ var select = $(this).parents(".parent .two").html(); console.log(select); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three </p> <button class="four"> button one </button> </div> <div class="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>
The class you are looking for (ie .two
) is a child of the same parent so it is a sibling .您正在寻找的类(即
.two
)是同一个父级的子级,因此它是兄弟级。 You don't need to traverse up the parents()
and back to get the sibling, you can do it like this:您不需要遍历
parents()
并返回以获取兄弟姐妹,您可以这样做:
$(document).on('click', '.four', function(){
var select = $(this).siblings(".two").html();
}
Working Example:工作示例:
$(document).on('click', '.four', function(){ var select = $(this).siblings(".two").html(); console.log(select); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three </p> <button class="four"> button one </button> </div> <div class="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>
If you really need to get traverse the parents for some reason, then you do it like this -first traverse the parents to get the one with the class you want, then get its children()
with class .two
:如果您出于某种原因确实需要遍历父母,那么您可以这样做 - 首先遍历父母以获取您想要的类,然后获取其
children()
类.two
:
$(this).parents(".parent").children(".two").html();
$(document).on('click', '.four', function(){ var select = $(this).parents(".parent").find('.two').html(); console.log(select); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three </p> <button class="four"> button one </button> </div> <div class="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>
Try this:尝试这个:
let parent = document.getElementById('parent'); let childs = parent.childNodes; console.log(childs[1].className)
<div class="parent" id="parent"> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>
You can try this你可以试试这个
$(document).on('click', '.four', function(){
console.log("clicked")
var select = $(this).parent().find('.two').html();
console.log(select);
});
that ?那 ?
document.querySelectorAll('button.four').forEach(btn=>{ btn.onclick=_=>{ console.log( btn.parentElement.querySelector('.three').textContent ) } })
<div class="parent"> <p class="one"> one </p> <p class="two"> two </p> <p class="three"> three</p> <button class="four"> button one </button> </div> <div class="parent "> <p class="one"> five </p> <p class="two"> six </p> <p class="three"> seven </p> <button class="four"> button two </button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.