javascript - 如何使用jquery获取元素的同级文本

Question

我有ul列表，在每个li中我有2个span和一个a标签链接和一个李的文字:

<li>
    <span>first name 1</span>
    <a>//icon to be selected</a>
    <span>last name 1</span>email address 1
</li>
<li>
    <span>first name 2</span>
    <a>//icon to be selected</a>
    <span>last name 2</span>email address 2
</li>
<!-- 
    multiple li 
-->
<li>
    <span>first name n</span>
    <a>//icon to be selected</a>
    <span>last name n</span>email address n
</li>

现在，如果用户在每个 li 标记中选择一个链接，通过 jquery，我想获取 名字 和 电子邮件地址 文本。如果能得到答复，我将不胜感激。

Answer 1

使用jquery prev()和 next()选择器查找目标跨度并使用 nextSibling属性来查找跨度的同级文本。

$("a").click(function(){
    var name = $(this).prev().text();
    var email = $(this).next()[0].nextSibling.nodeValue.trim();
    console.log(name);
    console.log(email);
});

a {
    color: red;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
    <span>first name 1</span>
    <a>//icon to be selected</a>
    <span>last name 1</span>
    email address 1
</li>
<li>
    <span>first name 2</span>
    <a>//icon to be selected</a>
    <span>last name 2</span>
    email address 2
</li>
<li>
    <span>first name n</span>
    <a>//icon to be selected</a>
    <span>last name n</span>
    email address n
</li>