獲取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()); 
}); 

Check Fiddle

香草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); 
     }); 
}); 

Check Fiddle

您需要定位最接近的父節點span1，其中包含span3，然後獲取該元素的文本。

Answer 2

由於您使用jQuery的你已經有多種選擇，所以你可以使用.parents()或.siblings()或.next()或也closest()（如舒尚特的回答所示），瞄準相關.span3跨度：

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