Changing attributes of cloned elements with CSS selectors

Question

I try to clone an element and then intersect its children and change the attributes accordingly, the fact is that I'm trying to access elements through user attributes using CSS selectors and I can’t get them to work, that's what I still have ,

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()only immediate or direct children get, you are looking .find()here:

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

Here you can try here .

. .find() , . , , data-new , HTML5.

, , - , , , .