Проходящие элементы jQuery получают все предыдущие элементы, которые соответствуют селектору - PullRequest
Новая
       19

Проходящие элементы jQuery получают все предыдущие элементы, которые соответствуют селектору

3 голосов
/ 04 сентября 2010

У меня есть коллекция div, которые содержат изображения или флажки. Моя конечная цель - сделать так, чтобы событие onclick было отмечено также и для всех предыдущих флажков.

Вот мой макет (создается динамически, поэтому id # может меняться в зависимости от данных загрузки страницы): 

   <div id="Main1">
      <div id="Secondary1">
         <div id="div1">
            <img id="section1" src="image1" alt="" />
            <span>Div 1 text</span>
          </div>
         <div id="div2">
            <img id="section2" src="image2" alt="" />
            <span>Div 2 text</span>
          </div>
         <div id="div3">
            <input type="checkbox" id="section3">
             Div 3 text
             </input>
         </div>
         <div id="div4">
            <input type="checkbox" id="section4">
             Div 4 text
             </input>
         </div>
         <div id="div5">
            <input type="checkbox" id="section5">
             Div 5 text
             </input>
         </div>
         <div id="div6">
            <input type="checkbox" id="section6">
             Div 6 text
             </input>
         </div>
      </div>
   </div>

Я хочу иметь возможность проверить раздел 5 и автоматически установить предыдущие флажки.

Код, который я использовал и который дает отдельные результаты, приведен ниже: 

$('input[id^=section]').click(function() {
   if($(this).attr('checked')) {
       var slide = $(this).attr('id').replace('section', '');
       $(this).replaceWith('<img src="images/ajax-loader.gif" id="loader" alt="" />'); //replace checkbox with loader animation
       $.ajax({
            type: 'POST',
            url: 'URL to AJAX page',
            data: '{ data for ajax call }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function() {
               $('#loader').parents('div[id^=Secondary]').children('div[id^=section]').each(function() {
                    if($(this).children('input[id^=section]').attr('id') != undefined) {
                          if($(this).children('input[id^=section]').attr('id').replace('section', '') < slide) {
                             $(this).children('input[id^=section]').replaceWith('<img src="images/checkmark.gif" alt="" />');
                       }
                    }
              });
            },
            error: function() {
                   //handle errors
            }
        });
   }
});

Мне кажется, что я неэффективно, я пытался .prev() и .prevAll(), но безуспешно. Однако я мог бы использовать их и неправильно. Любая помощь приветствуется.

Ответы [ 2 ]

3 голосов
/ 04 сентября 2010

Попробуйте это: http://jsfiddle.net/kgc4M/

if(this.checked) {
    $(this).closest('div').prevAll('div:has(:checkbox)')
                         .find(':checkbox').attr('checked','checked');

}

РЕДАКТИРОВАТЬ: Из вашего комментария вы хотите использовать .replaceWith(), чтобы заменить флажок изображением, но повторно использовать идентификатор флажка.

Попробуйте это: 

if(this.checked) {
    $(this).closest('div').prevAll('div:has(:checkbox)')
                .find(':checkbox')
                .replaceWith(function() {
                      return "<img src='/some/path.jpg' id='" + this.id + "' />";
                }).remove();
}

Обратите внимание, что я также звоню unbind() на заменяемых флажках, так как я не думаю, что replaceWith() очистит это для вас. Я проверю еще дважды.

РЕДАКТИРОВАТЬ: Появляется так, как будто .replaceWith() удаляет события и данные, но сохраняет запись в jQuery.cache для удаленных элементов. Чтобы быть точным, я избавился от unbind(), но добавил в конце .remove(), который полностью удаляет их из кэша.

0 голосов
/ 04 сентября 2010

.prev() и .prevAll() выберите братьев и сестер. Хотя флажки находятся на одном уровне дерева DOM, они не являются братьями и сестрами. Братья и сестры должны иметь одного и того же непосредственного родителя. Эти флажки больше похожи на двоюродных братьев.

Попробуйте что-нибудь подобное в вашем событии клика: 

if(this.checked) {
       $(this).parent().prevAll().children(':checkbox').attr('checked', 'checked');
}

Вот демоверсия: http://jsfiddle.net/dTK6n/

...