jQuery:查找包含嵌套ul的列表项的文本

Question

我有以下内容:

<ul id="list">
<li>item1
    <ul>
        <li>sub1</li>
        <li>sub2</li>
    </ul>    
</li>
</ul>

我想回复li click事件,并在其他地方使用li的文本.但是,如果单击是包含嵌套ul的li,我当然会得到所有元素的文本.

$("#list li").click(function() {
    alert($(this).text());
});

按预期返回item1sub1sub2.

如果单击项目1 li,我无法弄清楚如何获得'item1'.我尝试了以下(除其他事项外)没有运气:

$("#list li").click(function() {
    alert($(this).filter("ul").text());
});

有任何想法吗？

编辑

这是一个例子的片段 - 它可能是多层次的深度.我也不想将列表项文本包装在span或其他标记中.

Answer 1

这种方法怎么样？克隆对象,删除克隆的子项,然后查找文本内容.

$("#list li").click(function () {
    alert($(this).clone().children().remove().end().text());
}

也许不是最有效的方法,但它完全直观,非常整洁,你不必捣乱你的HTML.

Answer 2

普通的DOM方法只允许访问一个元素的文本内容,而不是jquery:

$("#list li").click(function() {
    alert($(this)[0].firstChild.textContent)
});

在这种情况下,firstChild是li元素下面的textNode

Answer 3

你很难,因为text()它应该做什么 - 返回这个和所有子元素的文本.最简单的方法是向每个标签添加另一个标签<li>,并使用此标签.
例如:

<ul id="list">
<li><span>item1</span>
    <ul>
        <li><span>sub1</span></li>
        <li><span>sub2</span></li>
    </</ul>    
</li>
</ul>

然后你有一个简单的选择器:

$("#list li").click(function() {
   alert($(this).find("span").eq(0).text());
});

或者,如果可能(取决于您的风格),您可以将事件添加到范围:

$("#list span").click(function() {
   alert($(this).text());
});

如果您不能添加这些<span>(如您所说),您可以使用jQuery .contents() 为您添加它们,类似于此处所做的:

在<x> A <br/> B </ x>中隐藏B.