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

Question

Примечание: это более лучший способ, чем вопрос.

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

$("#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

Theres' действительно нет возможности сделать это с этим HTML, но если вы implmented в отн Аттрибут или класс, который вы можете выбрать его довольно легко.

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

Answer 3

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

});