使用CSS選擇器更改克隆元素的屬性

Question

我想克隆一個元素，然後遍歷它的子元素並相應地更改屬性，事情是我試圖通過使用CSS選擇器的自定義屬性訪問元素，而我似乎無法得到它的工作，這裏是我迄今爲止，

HTML：

<div id='main_container'> 
    <div id="container"> 
     <div class="wrapper"> 
      <div><label>... </label></div> 
      <div><input type="text" id="one" new="one_1" /></div> 
     </div> 
     <div class="wrapper"> 
      <div><label>... </label></div> 
      <div> 
       <select id="two" new="two_1" > 
        <option>...</option> 
        <option>...</option> 
       </select> 
      </div> 
     </div> 
     <div class="wrapper"> 
      <div><label>... </label></div> 
      <div> 
       <select id="three" new="three_1" > 
        <option>...</option> 
        <option>...</option> 
       </select> 
      </div> 
     </div> 
    </div> 

    <div class="wrapper"> 
     <input type="button" value="add a section" id="button" /> 
    </div> 
</div> 

的jQuery：

$('#button').click(function(){ 
     var clone = $('#container').clone().appendTo('#main_container'); 

     clone.children('["new*=one"]').attr('class', 'one'); 
     clone.children('["new*=two"]').attr('class', 'two'); 
     clone.children('["new*=three"]').attr('class', 'three'); 
    }); 

Answer 1

.children()只得到立即或直接兒，你正在尋找.find()這裏，像這樣：

$('#button').click(function(){ 
    var clone = $('#container').clone().appendTo('#main_container'); 

    clone.find('[new*="one"]').attr('class', 'one'); 
    clone.find('[new*="two"]').attr('class', 'two'); 
    clone.find('[new*="three"]').attr('class', 'three'); 
}); 

You can give it a try here。

請注意上面移動的引號。 .find()搜索任意級別深，所以所有後代匹配選擇器時，這是這種情況下的重要區別。另外，爲了保證屬性的安全性，我會使用data-new來代替，它也會兼容HTML5。

要記住的另一件事是，您發佈的代碼，您獲得重複的ID，確保在克隆時刪除或更改這些ID。