代码之家 › 专栏 › 技术社区 › jon3laze

jQuery遍历元素获取与选择器匹配的所有先前元素

traversal jquery-selectors jquery

jon3laze · 技术社区 · 15 年前

我有一个包含图像或复选框的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 回复 | 直到 15 年前

user113716 15 年前

试试这个: 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 对于移除的元素。为了彻底起见,我摆脱了 取消绑定() 但补充道 .remove() 最后,这会将它们从缓存中完全移除。

Ender 15 年前

.prev() .prevAll() 选择同级。即使复选框位于DOM树的同一级别,它们也不是同级。兄弟姐妹必须分享同样的东西

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

下面是一个演示: http://jsfiddle.net/dTK6n/