如何在jquery中获取列表项的最顶端父项的文本

How to get the text of the top most parent of list item in jquery?

本文关键字：文本 列表 jquery 获取      更新时间：2023-09-26

我有以下ul list的设计。

<ul>
    <li class="category">
        Design
        <ul>
            <li>Graphic Design</li>
            <li>Web Design </li>
            <li>HTML</li>
            <li>CSS</li>
            <li>Print</li>
        </ul>
    </li>
    <li class="category">
        Development
        <ul>
            <li>PHP</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

现在我想要的是，如果你点击"CSS"项目，我想得到它的父项的文本，即"设计"。我尝试了以下代码，但我得到了完整的列表。

$('ul').on("click", "li", function (e) {
    console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parents(".category").text());
});

尝试更换此部件

$(this).parents(".category").text()

带有

$(this).parents(".category")[0].childNodes[0].textContent;

childNodes返回包括文本节点在内的所有子元素。

如果您只想使用jQuery，那么将此文本节点包装在跨度中

<ul>
    <li class="category">
        <span>Design</span>
        <ul>
            <li>Graphic Design</li>
            <li>Web Design </li>
            <li>HTML</li>
            <li>CSS</li>
            <li>Print</li>
        </ul>
    </li>
    <li class="category">
        <span>Development</span>
        <ul>
            <li>PHP</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

并使用获取第一个节点的文本

$(this).parents(".category span").html()

另一种方法可以是使用jquery 的contents和filter

$(this).parents(".category").contents().filter(function() {
    return this.nodeType == 3;
}).nodeValue;

仅更改：

console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parents(".category").text());

带有：

console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parent().text());
相关文章：