jQuery遍歷元素得到所有匹配選擇器的元素

我有一個包含圖像或複選框的div集合。我的最終目標是讓複選框上的onclick事件也檢查所有以前的複選框。jQuery遍歷元素得到所有匹配選擇器的元素

這裏是我的佈局（動態創建這樣編號的能夠基於頁面加載數據）：

<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>

我希望能夠檢查section5並讓它自動檢查前面的複選框。

我一直在使用，這是產生零星結果的代碼如下：

$('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()但沒有成功。不過，我也可能錯誤地使用了它們。任何援助表示讚賞。

來源

2010-09-03 jon3laze

試試這個：http://jsfiddle.net/kgc4M/

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

}

編輯：從您的意見，您要使用.replaceWith()用圖像來代替複選框，但重複使用複選框的ID。

試試這個：

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()，這將它們從緩存中完全刪除。

來源

2010-09-03 23:08:26 user113716

完美！感謝您的及時迴應。還有1個問題，是否可以提取元素的ID？我正在用圖像替換複選框，並希望爲圖像提供與複選框相同的ID。使用你的代碼片段，並用.replaceWith（）代替.attr（'checked'，'checked'）來代替，但是我想要動態地取出被替換的元素的ID。這可能嗎？ – jon3laze 2010-09-03 23:21:47

@jon - 是的。如果您使用的是jQuery 1.4或更高版本，則可以將函數傳遞給'.replaceWith（）'，該函數將返回HTML字符串作爲替換。在函數內部，你可以使用'this。id'來引用複選框的ID。我會用一個例子來更新。 – user113716 2010-09-03 23:31:06

太棒了！再次感謝你，這幫了一大筆錢。 – jon3laze 2010-09-04 00:25:57

.prev()和.prevAll()選擇兄弟姐妹。儘管複選框與DOM樹的同一級別上，他們不是兄弟姐妹。兄弟姐妹必須與父母共享相同的直接。這些複選框更像堂兄弟。

嘗試是這樣的點擊事件中：

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

這裏有一個演示：http://jsfiddle.net/dTK6n/

來源

2010-09-03 23:13:10 Ender

jQuery遍歷元素得到所有匹配選擇器的元素

回答

相關問題