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。

使用CSS选择器更改克隆元素的属性

1 个答案: