Question

我有以下内容：

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

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

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

按预期返回item1sub1sub2。

如果单击项目1 li，我无法弄清楚如何获得'item1'。我尝试了以下（除其他事项外）没有运气：

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

有什么想法吗？

修改

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

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()为您添加它们，类似于此处所做的：

Hide B in <x>A<br/>B</x>

Answer 4

这将检查列表项是否包含任何子项，如果是，则仅筛选出文本节点并连接结果（在这种情况下，它将适用于文本元素，无论它们放在li中）。如果您只想在开始时检查元素，可以避免使用for循环，只需使用this.firstChild

$("#list li").click(function(e) {
    if ($(this).children().length > 0) {
       var text = "";
       for (var i = 0; i < this.childNodes.length; i++) {
           var node = this.childNodes[i];
           if (node.nodeType === 3 && $.trim(node.nodeValue).length > 0) {
                text += $.trim(node.nodeValue);
           }
       }
       alert(text);
    }
    else {
       alert($(this).text());
    }
    e.stopPropagation();
});

Answer 5

因此，这个机制从子元素中提取html，替换没有任何内容的换行符，然后只将字符串返回到第一个“<”字符。我还添加了event.stopPropagation以避免将click事件调用到父级。

<script type="text/javascript">
$("#list li").click(function(event) {
    var sourceHTML = $(this).html().replace(/\n/g,'').replace(/<.*/,'');
    alert(sourceHTML);
    event.stopPropagation();
});
</script>

Answer 6

我认为你需要使用每种方法。所以请尝试以下脚本：

$(document).ready(function() {
        $('ul').each(function() {
            $(this).find('li').click(function() {
                var listItem = this;
                alert($(listItem).text());
            });
        })
    });

使用以下标记

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Answer 7

实现相同的另一种方式

$("#list li").click(function() {
    alert($(this).contents().not('ul,ol').text());
});

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

7 个答案: