Question

我想从HTML列表中获取价值

<div id="test">
    <ul>     
       <li>C:\        
         <ul class="leftbutton" >                 
            <li value="List1">Folder 1</li>                 
            <li value="List2">Folder 2</li>                 
            <li value="List3">Folder 3</li>                 
            <li value="List4">Folder 4</li>                 
            <li value="List5">Folder 5</li>         
         </ul>     
      </li> 
    </ul>  
</div>

我使用了以下代码

    $("#test li").live('click', function (event) {
        alert($(this).text());
    });

如果我点击了list1，我会收到警告文件夹1 现在我的问题是我需要得到警报 C：\文件夹1，如果我单击List1和C：\ Folder 3，如果我单击list3

修改我在这里展示的是一个目录结构树视图。会有更多级别，因为可以有更多的子文件夹更新的html代码如下所示

<div id="test">
        <ul>     
           <li>
             <span>C:\</span>       
             <ul class="leftbutton" >                 
                <li value="List1"><span>Folder1</span></li>                 
                <li value="List2"><span>Folder2</span></li>
                   <ul>
                      <li value="SubList1"><span>SubFolder1</span></li>                 
                      <li value="SubList2"><span>SubFolder2</span></li>
                   </ul>
                <li value="List3">Folder 3</li>                 
                <li value="List4">Folder 4</li>                 
                <li value="List5">Folder 5</li>         
             </ul>     
          </li> 
        </ul>  
</div>

Answer 1

最简单的解决方案是将“C：\”文本包装在<span>中，如下所示：

<div id="test">
    <ul>     
        <li><span>C:\</span>
            <ul class="leftbutton">                 
                <li value="List1">Folder 1</li>                 
                <li value="List2">Folder 2</li>                 
                <li value="List3">Folder 3</li>                 
                <li value="List4">Folder 4</li>                 
                <li value="List5">Folder 5</li>         
            </ul>     
        </li> 
    </ul>  
</div>

然后，在jQuery中：

$('#test li li').live('click', function(event) {
    var $this = $(this);
    alert($this.parents('li').find('span').text() + $this.text());
});

如果您添加更多列表项，例如D:\或E:\，这也会有用。

演示： http://jsfiddle.net/mathias/C6hdT/

Answer 2

尝试使用

$("#test li").live('click', function (event) {
    alert('C:\' + $(this).text());
});

Answer 3

试试这个：

$("#test li").live('click', function (event) {
        alert($(this).text());
        event.stopPropagation();
    });

Answer 4

点击li后，你必须在li树上工作。换句话说，检查父li是否存在，并将其值前置到该位置的返回字符串。

Answer 5

如果您想在警报中仅添加c：\而不是简单地尝试此

 $("#test>li").live('click', function (event) {
       $text=$(this).text());
       alert('C:\\'+$text)
    });

Answer 6

  $("#test li").click(function (event) {
      alert("C:\\"+ $(this).text());
      event.stopPropagation();
    });

你不必在这个场景中使用live，因为它是将事件绑定到DOM中动态添加的元素

DEMO

Answer 7

  $("#test li").live('click', function (event) {         alert($(this+':child').text().substr(0,3)+$(this).text());     });

Answer 8

这不需要无关的<span>标签，它会自由地向上移动树。

请参阅：http://jsfiddle.net/thirtydot/U8YXf/

$("#test li").live('click', function(event) {
    var path = '';
    $(this).parents('li').add(this).each(function() {
        path += $.trim($(this)[0].firstChild.nodeValue).replace(/\\$/, '') + '\\';
    });
    event.stopPropagation();
    alert(path);
});

Answer 9

这对我有用：当我创建列表时，我为每个列表提供了一个id 定义完整路径。我从上面的答案中使用过的一些代码。

$("#test li").live('click', function (event) {
    alert(this.id);
    event.stopPropagation();
});

使用jquery获取单击列表的文本

9 个答案: