使用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');
});

你可以在这里尝试一下.

请注意上面移动的引号. .find()搜索任何级别的深度,所以所有后代在匹配选择器时,这是这种情况下的重要区别.另外,为了安全起见,我会使用data-new它,它也将符合HTML5标准.

要记住的另一件事是使用您发布的代码,您将获得重复的ID,确保在克隆时删除或更改这些ID.