JQuery выбрать всех детей в пределах детей - PullRequest
Новая
       11

JQuery выбрать всех детей в пределах детей

0 голосов
/ 05 августа 2011

Я уверен, что это будет простой вопрос, но я все еще борюсь с селекторами DOM в Jquery, поэтому вот модель моего HTML-кода: 

<fieldset class="product-options" id="product-options-wrapper">
   <ul class="options-list">
      <li><a href>Item1.1</a></li>
      <li><a href>Item1.2</a></li>
      <li><a href>Item1.3</a></li>
   </ul>

   ...other html items here

   <ul class="options-list">
      <li><a href>Item2.1</a></li>
      <li><a href>Item2.2</a></li>
      <li><a href>Item2.3</a></li>
   </ul>

</fieldset>

Теперь, как мне выбрать все 'li a 'элементы в обоих списках (или X число списков) с именем класса .options-list и связать их с функцией щелчка.

В настоящее время у меня есть: 

$('fieldset#product-options-wrapper ul.options-list > li a').bind('click', function(e) {
     //code here
});

И этотолько получает первый список опций.

Спасибо, очень признателен!

РЕДАКТИРОВАТЬ: Если я сначала нажму на элемент списка Item2.X, то он захватит этот список опций.Но как только я нажимаю на элементы списка Item1.x, он игнорирует второй список .options

Ответы [ 4 ]

1 голос
/ 05 августа 2011

Если вы собираетесь связывать каждый элемент li, вам следует вместо этого связать его с элементом ul (это сильно помогает в производительности при большом количестве событий). 

$('.options-list', '#product-options-wrapper').bind('click', function(e)
{
   e.preventDefault();//In case you don't want to go to a different page
   var clicked = e.target;//The href that was clicked
   /* If you only want this to happen if the a tag was clicked, add the following line
   if(clicked.tagName == 'A')*/
   //Rest here
});
1 голос
/ 05 августа 2011

Как насчет $('.options-list a').bind('click', function(e) { });?

0 голосов
/ 05 августа 2011

Ваш метод мне кажется правильным.Я создал тестовую скрипку, используя ваш HTML (и дополнительный якорь, чтобы доказать, что клик не будет добавлен) и ваш JS (с небольшими изменениями).

http://jsfiddle.net/chrisvenus/esZxH/1/

Селектор у вас работал, но так как вы сказали, что хотите, чтобы a был прямым потомком li (или, по крайней мере, я так читал), я немного подправил его в своей версии выше.A Вы уверены, что не только ваша функция выполняет не совсем то, что вы хотите во время выполнения, или вы можете подтвердить, что ваша функция щелчка вообще не запускается?

0 голосов
/ 05 августа 2011

В этом случае вы можете использовать делегат, чтобы сделать его еще проще.Попробуйте это 

$('#product-options-wrapper ul.options-list').delegate('li > a', 'click', function(e) {
     //code here
});
...