使用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。