使用CSS选择器更改克隆元素的属性 [英] Changing attributes of cloned elements using CSS selectors

问题描述

我试图克隆一个元素，然后遍历它的子元素并相应地更改属性，问题是我试图通过使用CSS选择器的自定义属性来访问元素，而我似乎无法获取它工作，这是我迄今为止，

HTML：

 < div id ='main_container'> 
< div id =container> 
< div class =wrapper> 
< div>< label> ...< / label>< / div> 
< div>< input type =textid =onenew =one_1/>< / div> 
< / div> 
< div class =wrapper> 
< div>< label> ...< / label>< / div> 
< div> 
< select id =twonew =two_1> 
< option> ...< / option> 
< option> ...< / option> 
< / select> 
< / div> 
< / div> 
< div class =wrapper> 
< div>< label> ...< / label>< / div> 
< div> 
< select id =threenew =three_1> 
< option> ...< / option> 
< option> ...< / option> 
< / select> 
< / div> 
< / div> 
< / div> 
 
< div class =wrapper> 
< input type =buttonvalue =add a sectionid =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'）; 
}）; 
  

解决方案

.children（） 仅获得直接或直接孩子，你正在寻找 .find（） 在这里，像这样：

pre $ $（'＃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（） 搜索 any 层次较深，因此所有后代匹配选择器时，这是这种情况下的重要区别。另外，为了保证属性的安全，我会使用 data-new 来替代它，它也会兼容HTML5。

另外需要注意的是，您发布的代码，重复的ID，确保在克隆时删除或更改。

I am trying to clone an element, and then traverse through it's child elements and change attributes accordingly, the thing is that I am trying to access the elements via custom attributes using CSS selectors and I can't seem to get it to work, here is what I have thus far,

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

解决方案

.children() only gets immediate or direct children, you're looking for .find() here, like this:

$('#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.

Note the moved quotes above as well. .find() searches any level deep, so all descendants when matching the selector, that's the important difference in this case. Also, to be safe on the attribute though, I'd use data-new instead, it'll be HTML5 compliant as well.

Another thing to keep in mind is with the code you posted, you're getting duplicate IDs, make sure to remove or change those when cloning.

这篇关于使用CSS选择器更改克隆元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！