如何通過類名獲取位於父元素中的元素的值

Question

我想使用元素的類名查找位於父元素中的元素的值。

下面是我的代碼，它在與我要查找的元素相同的父級中有一個按鈕，但是當我單擊它時，我得到“未定義”。

 $(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>

Answer 1

您正在尋找的類（即.two ）是同一個父級的子級，因此它是兄弟級。 您不需要遍歷parents()並返回以獲取兄弟姐妹，您可以這樣做：

$(document).on('click', '.four', function(){   
    var select = $(this).siblings(".two").html();
}

工作示例：

 $(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>

如果您出於某種原因確實需要遍歷父母，那么您可以這樣做 - 首先遍歷父母以獲取您想要的類，然后獲取其children()類.two ：

$(this).parents(".parent").children(".two").html();

Answer 2

 $(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>

Answer 3

嘗試這個：

 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>

Answer 4

你可以試試這個

$(document).on('click', '.four', function(){
        console.log("clicked")
    var select = $(this).parent().find('.two').html();
  console.log(select);
 });

Answer 5

那 ？

 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>