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

以下是我的结构：

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

X
一些文本

---

当我点击

span2

时，我遇到的问题是如何通过警报（例如

span3

的文本）进行拾取？

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

，然后获取该元素的文本。

由于使用jQuery，您有多种选择，因此可以使用或或或

最接近的（）

（如Sushanth的回答所示），要针对相关的

.span3

span：

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

希望这有帮助

$（'.span2'）。在（'click'，function（）上{
console.log（$（this）.parents（'.span1'）.find（'.span3'）.text（））；
//或
console.log（$（this.sibbines（'.span3'）.text（））；
//或
log（$（this.next（'.span3'）.text（））；
})

X
一些文本

编辑：如果存在多个集合，则将其更改

下面是一个使用

.nextElementSibling

属性的JavaScript示例：

片段

var d1=document.querySelector（'.div1'）；
d1.addEventListener（'click'，函数（e）{
var txt=e.target.nextElementSibling.textContent；
警报（txt）；
}，假）
.span2{
边框：1px纯黑；
}
.span3{
指针事件：无
}

X
一些文本1


X
一些文本2


X
一些文本3


X
一些文本4
您尝试了什么？您是否也想要另一种方式（当单击
span3
show
span2
text时）？