Блог

Главная - Вопросы по программированию - Как получить listitem с помощью jQueryUI

Как получить listitem с помощью jQueryUI

#jquery #list #jquery-ui

#jquery #Список #jquery-пользовательский интерфейс

Вопрос:

Я пытаюсь использовать jQuery для получения значений ListItems в неупорядоченном списке. Приведенный ниже код близок к рабочему, но он всегда возвращает значение первого ListItem, даже если установлен флажок для второго.

 $(document).ready(function() {
    $("li").click(function() {
        $("input:checked").each(function() {
            alert($("label").attr('InnerText'));
        });
    });
});
  
 <div> 
    <ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
        <li class="AspNet-CheckBoxList-Item">
            <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0"  value="first1" />
            <label for="CheckBoxList1_0">First $30.00</label>
        </li>
        <li class="AspNet-CheckBoxList-Item">
            <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="second2" />
            <label for="CheckBoxList1_1">Second $25.00</label>
        </li>
     </ul>
</div>

Комментарии:

1. Ваше предупреждение ссылается на атрибут, который не существует. В вашем оповещении должно отображаться «undefined».

2. попробуйте .text() вместо attr('innerText')

Ответ №1:

Демонстрационная скрипка

  • Использовать .text() вместо .attr('innerText') — innerText является свойством объекта javascript, не будет работать с использованием .attr() .

  • Используйте $(this).next('label') , чтобы получить соответствующую метку для флажка. В .each() — $(this) относится к checkbox и НЕ li нажата.

 $("input:checked").each(function() {
      alert($(this).next('label').text());
});

Ответ №2:

На данный момент $("label") обрабатывает все метки на странице (то же самое с $("input:checked") )

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

 $(document).ready(function() {
    $("li").click(function() {
        $("input:checked", $(this)).each($.proxy(function() {
            alert($("label", $(this)).attr('InnerText'));
        }, this));
    });
});

Кроме того, я не вижу InnerText атрибута. Вы уверены, что это не должно было быть просто .text() ?

Ответ №3:

Надеюсь, это поможет

 $(document).ready(function() {
    $("li").click(function() {
        if ($(this).find("input:checked")) {
            alert($(this).find("label").text());
        }
    });
});

Приветствия!

Ответ №4:

Чтобы это заработало, просто измените код следующим образом

 $("li").click(function() {
    $("input:checked").siblings('label').each(function() {
        alert($(this).text());
    });
});

siblings() Метод получает значения для input:checked , в данном случае вы помечаете

Рабочий пример находится здесь