JQuery: найти текст элемента списка, который содержит вложенный UL

Question

У меня есть следующее:

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

Я бы хотел ответить на событие щелчка мыши и использовать текст li в другом месте. Однако, если щелчок мышью по li, который содержит вложенный ul, я, конечно, получаю текст всех элементов.

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

возвращает item1sub1sub2, как и ожидалось.

Я не могу понять, как получить «item1», если щелкнуть пункт 1 li. Я попробовал следующее (между прочим) без удачи:

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

Есть идеи?

EDIT

Это фрагмент примера - он может иметь несколько уровней глубины. Я также не хочу оборачивать текст элемента списка в 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 в этом случае - это textNode под элементом li

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() , чтобы добавить их для вас, подобно тому, как это было сделано здесь:

Скрыть B в A
B

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

Еще один способ добиться того же

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

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

Таким образом, этот механизм извлекает 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>