Выберите несколько li, и это первый ребенок, использующий jquery

0

Я пытаюсь добавить событие onclick в тег определенного li которые находятся под ul с id #nav.

Структура HTML:

<ul id="nav">
    <li><a href="#">link1</a></li>
    <li>
        <a href="#">link2</a>
        <ul>
            <li><a href="#">innerlink1</a></li>
            <li><a href="#">innerlink2</a></li>
        </ul>
    </li>
    <li><a href="#">link3</a></li>
    <li>
        <a href="#">link4</a>
        <ul>
            <li><a href="#">innerlink1</a></li>
            <li><a href="#">innerlink2</a></li>
        </ul>
    </li>
</ul>

Jquery

$( document ).ready(function() {
    $("ul#nav li").eq(1).children().first().click(function(){
        $(this).attr('onclick', 'return false;');
        return false;
    });
    $("ul#nav li").eq(5).children().first().click(function(){
        $(this).attr('onclick', 'return false;');
        return false;
    });
});

Если вы видите, я дважды пишу jQuery, чтобы выбрать элемент элемента li которого есть другая ul внутри, и добавить к нему событие onclick. Это работает нормально. Но есть ли способ уменьшить мой код и сделать его более чистым?

  • 2
    $(this).attr('onclick', 'return false;'); Что этот анти-шаблон делает в вашем коде? Убери это.
  • 0
    Что вы подразумеваете под анти-паттерном? Не могли бы вы объяснить? Я хочу учиться.
Показать ещё 2 комментария
Теги:

5 ответов

1
Лучший ответ

Поэтому вы не хотите, чтобы li, содержащий дочерний элемент ul, запускал событие click, поэтому я думаю, что это будет так

$('#nav li:has(>ul)').click(function (event) {
    event.preventDefault();
    alert('click');
});

скрипку можно найти здесь: http://jsfiddle.net/552T4/3/

Поделиться
  • 0
    Огромное спасибо. Это сработало для меня :)
  • 0
    Ой, подождите, мои внутренние ссылки не работают сейчас. Я попытался "$ ('# nav li: has (> ul)'). Children (). First ()", но опять-таки это относится только к первому li.
Показать ещё 2 комментария
0

Эй, вы можете найти это:

    $("ul#nav li:has(>ul)")
Поделиться
  • 0
    Любил этот. Но так же, как первое решение. Это работает для тега первой ли.
0 
$("ul#nav li:eq(1),ul#nav li:eq(5)").children().click(function(){
   e.preventDefault();
   var youClicked=$(this).text();
   alert(youClicked);

});
Поделиться
  • 0
    Спасибо за решение. Но это возвращает только первую ссылку.
  • 0
    ок удалите .first () .... я обновил @ user3531929
Показать ещё 2 комментария
0

Пожалуйста, попробуйте это.

$( document ).ready(function() {
    $("#nav > li").each(function(){
        $(this).find('a').attr('onclick', 'return false;');
    });    
});

Ниже приводится сценарий этого.

Js Fiddle

В приведенном выше примере я применяю событие "onclick" ко всем якорям. если вы хотите применить только тот li, у которого есть дочерняя ul, тогда код выглядит примерно так.

$( document ).ready(function() {
    $("#nav > li").each(function(){
        if($(this).find('ul').length>0)
        {
           $(this).find('a').attr('onclick', 'return false;');
        }
    });    
});

ниже приведена ссылка для выбранного элемента Li с Ul.

li с ul onclick

Поделиться
  • 0
    Теперь вы применяете этот onclick ко всем #nav > li a . Это все якоря, а не только те, которые хочет ОП.
  • 0
    @Cerbrus да я применяю все якоря. если вы хотите только сначала, то это также можно сделать с помощью first. я обновляю свой ответ, пожалуйста, проверьте его.
Показать ещё 5 комментариев
-1

Да, добавьте идентификатор в нужные элементы:

Структура HTML:

<ul id="nav">
    <li><a href="#">link1</a></li>
    <li>
        <a href="#" id="liOne">link2</a>
        <ul>
            <li>innerlink1</li>
            <li>innerlink2</li>
        </ul>
    </li>
    <li><a href="#">link3</a></li>
    <li>
        <a href="#" id="liTwo">link4</a>
        <ul>
            <li>innerlink1</li>
            <li>innerlink2</li>
        </ul>
    </li>
</ul>

Jquery

$("#liOne, #liTwo").click(function(e){
    e.preventDefault();
    return false;
});

Или даже класс, а не id.

Таким образом, вам нужно добавить атрибуты id/class к элементам, для которых нужно обработать событие click, вместо того, чтобы обходить DOM.

Поделиться
  • 0
    Спасибо за решение. К сожалению, я не могу добавить идентификаторы, поскольку li приходят из цикла.
  • 1
    @ user3531929: Ах, это позор: P Кроме того, может ли человек, который отклонил этот ответ, пожалуйста, объясните, почему? Если я допустил ошибку, я бы хотел учиться на ней. Хотя это может и не быть решением для OP, оно предназначено для случаев использования, когда пользователь имеет возможность влиять на структуру HTML.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню