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 获取 first name 和 email address 文本。我将不胜感激。

Answer 1

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

$("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>