JQuery ориентирован на конкретные ссылки оптимальным образом

Question

Примечание: это скорее вопрос "как", чем "вопрос".

У меня есть несколько ссылок в ul, на которые я хотел бы нацелиться, но не на каждый тег. Хотя я знаю, что могу нацеливать каждый элемент по идентификатору, я хотел бы знать, что является наилучшей практикой (наиболее оптимизированная сортировка, минимальное количество кода) для этой задачи.

   $("#id").find("a").click(function(){
  //run function                    
});     

разметка:

    <nav id="id">    
  <ul>
    <li id="want-01"><a href="#">link</a></li>
    <li id="want-02"><a href="#">link</a></li>
    <li id="want-03"><a href="#">link</a></li>
    <li id="dont-want-01"><a href="#">link</a></li>
    <li id="dont-want-02"><a href="#">link</a></li>
    <li id="want-04"><a href="#">link</a></li>
    <li id="want-05"><a href="#">link</a></li>
  </ul>       
</nav>

Answer 1

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

$('.li_link').click(function() {...});

Если вы хотите изменить элементы li, которые обрабатываются динамически, вы можете рассмотреть возможность использования живых событий.Это позволяет вам добавлять и удалять класс li_link из элементов li, и обработчик щелчков применяет или перестает автоматически применяться к элементам li.

Чтобы настроить прямое событие, используйте что-то вроде этого:

 $('.li_link').live('click', function() {...});

Answer 2

$("#id").find("a").not("#dont-want-01 a, #dont-want-02 a").click(function(){   

});   

Answer 3

На самом деле нет никакого способа сделать это с этим HTML, но если вы внедрили rel attr или класс, вы можете выбрать его довольно легко.

   <nav id="id">    
  <ul>
    <li id="want-01" rel="wanted"><a href="#">link</a></li>
    <li id="want-02" rel="wanted"><a href="#">link</a></li>
    <li id="want-03" rel="wanted"><a href="#">link</a></li>
    <li id="dont-want-01"><a href="#">link</a></li>
    <li id="dont-want-02"><a href="#">link</a></li>
    <li id="want-04" rel="wanted"> <a href="#">link</a></li>
    <li id="want-05" rel="wanted"><a href="#">link</a></li>
  </ul>       
</nav>

$("#id").find('li[rel=wanted]').children();