單擊其他跨度時獲取 div 內跨度的值

Question

這是我的結構：

<div class="div1">
    <span class="span1">
       <span class="span2">X</span>
       <span class="span3">some text</span>
    </span>   
</div>

當我點擊span2時，我遇到的問題是如何通過警報來獲取例如span3文本？

Answer 1

jQuery

$('.span2').on('click', function() {
    var $span3 = $(this).closest('.span1').find('.span3');

    console.log($span3.text());
});

檢查小提琴

香草JS

let span2 = document.querySelectorAll('.span2');

Array.from(span2).forEach(function(elem) {
        elem.addEventListener('click', function() {
            let span3 = this.parentNode.querySelector('.span3');

            console.log(span3.innerHTML);
      });
});

檢查小提琴

您需要定位最近的父span1 ，即此處包含span3 ，然后獲取該元素的文本。

Answer 2

由於您使用的是 jQuery，因此您有多種選擇，因此您可以使用.parents()或.siblings()或.next()或closest() （如Sushanth 的回答所示）來定位相關的.span3 span ：

$('.span2').on('click', function(){
    $(this).parents('.span1').find('.span3').text();
    //Or
    $(this).siblings('.span3').text();
    //Or
    $(this).next('.span3').text();
})

希望這可以幫助。

 $('.span2').on('click', function(){ console.log( $(this).parents('.span1').find('.span3').text() ); //Or console.log( $(this).siblings('.span3').text() ); //Or console.log( $(this).next('.span3').text() ); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"> <span class="span1"> <span class="span2">X</span> <span class="span3">some text</span> </span> </div>

Answer 3

編輯：如果有多個集，則更改它。

這是一個使用.nextElementSibling屬性的 JavaScript 示例：

片段

 var d1 = document.querySelector('.div1'); d1.addEventListener('click', function(e) { var txt = e.target.nextElementSibling.textContent; alert(txt); }, false);

 .span2 { border: 1px solid black; } .span3 { pointer-events: none }

 <div class="div1"> <span class="span1"> <span class="span2">X</span> <span class="span3">some text 1</span> </span> <br> <span class="span1"> <span class="span2">X</span> <span class="span3">some text 2</span> </span> <br> <span class="span1"> <span class="span2">X</span> <span class="span3">some text 3</span> </span> <br> <span class="span1"> <span class="span2">X</span> <span class="span3">some text 4</span> </span> </div>