javascript - 如何在 div 框中附加单击的 li 文本？

Question

我有以下html：-

<span id="event">
<ul>
    <li>Activities
    <ul>
        <li>Physical1
        <ul>
            <li>Cricket
            <ul><li>One Day</li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</span>
<div id="activity"></div>

我想使用 jquery click 函数在每个 li 上设置 click 事件，
它工作得很好，但我想在#activitydiv中设置这个 li 文本
这是我尝试过的：

$("#event ul li").live("click", function(event){
    event.stopPropagation();
    alert($(this).text());
    $("#activity").append($(this).text());
    return false;
});

http://jsfiddle.net/Va5E4/7/

现在，当我单击 li 时，它们会出现问题，它会将所有 li 文本附加到 div 中，我只想单击 li 文本。
当点击li那里的文本附加在div标签例如：-点击板球然后板球附加在div中，当点击一天附加在div上...

我该怎么做呢？谢谢。

Answer 1

You can grab the first childNode of the clicked li and append that:

$("#activity").append(this.childNodes[0].nodeValue);

Here's a fiddle

Answer 2

这是使用 jquery 方法的替代方法

它的作用是克隆单击的节点，然后删除所有子节点。剩下的只是被点击的节点，所以我们只得到它的文本。

$("#event li").on("click", function (event) {
    event.stopPropagation();
    $("#activity").append($(this).clone().children().remove().end().text());
    return false;
});

在jsfiddle 上

Answer 3

请查看 http://jsfiddle.net/Va5E4/12/

<div id="event">
<ul><li>Activities
    <ul> <li>Physical1
        <ul> <li>Cricket
            <ul><li>OneDay </li></ul>
            </li> </ul>
        </li> </ul>
    </li></ul>
</div>
<div id="activity"></div>

$("#event ul li").on("click", function(event){
event.stopPropagation();
  var html = $(this).html()   
   var word = html.substr(0, html.indexOf(" "));   
    $("#activity").append(word);
return false;
});

注意：如果您将“单个字符串”作为“li”的“值”，这将起作用，否则它将不起作用。