Question

我有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>

现在我想要的是你点击＆＃34; CSS＆＃34; item，我想得到其父母的文字，即＆＃34; Design＆＃34;。我已经尝试了以下代码，但我得到了整个列表。

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

Answer 1

尝试替换此部分

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

与

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

childNodes返回所有子元素，包括文本节点。

如果您只想使用jQuery，请将此textnode包装在span

中

<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;

Answer 2

只是改变：

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

with：

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

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

2 个答案: