получить текст списка по клику, используя jquery

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());
    });

Я получаю предупреждение как Папка 1, если я нажму на список1 Теперь мойпроблема в том, что мне нужно получить предупреждение как C: \ Папка 1, если я нажимаю List1 и C: \ Папка 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());
});

Thisтакже будет работать, если вы добавите больше элементов списка, например D:\ или E:\.

Демо: http://jsfiddle.net/mathias/C6hdT/

Answer 2

это сработало для меня: когда я создавал список, я предоставлял каждому списку идентификатор, который определяет полный путь.часть кода, который я использовал из приведенных выше ответов.

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

Answer 3

Для этого не нужны посторонние теги <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 4

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

Answer 5

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

вам не нужно использовать live в этом сценарии, так как он используется для привязки событий к динамически добавленным элементам в DOM

DEMO

Answer 6

, если вы хотите добавить только c: \ в свое оповещение, просто попробуйте это

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

Answer 7

Вы должны пройти свой путь вверх по дереву li после щелчка li.Другими словами, проверьте, существует ли родительский li, и добавьте его значение к возвращаемой строке местоположения.

Answer 8

попробуйте это:

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

Answer 9

попробуй использовать

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