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

Vanilla 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的{{1}}最近的父级，然后获取该元素的文本。

Answer 2

由于您使用的是jQuery，因此您可以使用 .parents() 或 .siblings() 或 {{3 }} 或closest()（如 Sushanth的答案中所示），以定位相关的.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>

单击其他跨度时获取div内的跨度值

3 个答案: