Select Element with Data Attribute

Question

I have following markup

<div class="cloneLayoutSelect">
    <div class="col2">
        <select name="ingredients[0][name]" id="ingredient" class="select" data-multi-column="true" data-label="Ingredient">
            <option value="0">Carrot</option>
            <option value="1">Milk</option>
            <option value="2">Yogurt</option>
        </select>
    </div>
    <div class="col2"><input name="ingredients[0][quantity]" id="quantity" class="form-control" placeholder="Quantity" data-multi-column="true" data-label="Quantity" value="" type="text"></div>
    <div class="col1 text-right"><button class="btn btn-default multi-column-2"><i class="fa fa-plus"></i></button></div>
    <div class="clearfix clear"></div>
</div>

On click of button.multi-column-2 I want to

Get all elements within the parent div cloneLayoutSelect and which has the data attribute of data-multi-column="true"
Get value of data-label of individual element from the previous match
Get input/select/radio/checkbox value of individual element from the previous match

I tried the following:

var elements = $('*[data-multi-column="true"]');
$.each(elements, function(index, htmlElement) {
    var element = $('<div><div/>').html(htmlElement).contents();
});

Although it returns me desired result, i have two problems with this

It searches in all html markup, which is not what i want, I want to only search it within its parent element cloneLayoutSelect.
It removes all html within <div class="col2">

Any help or pointers is appreciated.

Thanks.

jsfiddle.net/arunpjohny/0e2zbaq8/1 - what are you trying to do in the each loop — Arun P Johny
– Arun P Johny, Commented Mar 19, 2015 at 3:35
“It search in all html markup, which is not what i want, I want to only search it within its parent element cloneLayoutSelect” – well then prepend that to your selector, or use find() on those elements. — C3roe
– C3roe, Commented Mar 19, 2015 at 3:40
@ArunPJohny jsfiddle.net/arunpjohny/0e2zbaq8/2 , this is what i needed, thanks, can you post this as an answer? — Ibrahim Azhar Armar
– Ibrahim Azhar Armar, Commented Mar 19, 2015 at 3:43

Arun P Johny · Accepted Answer · 2015-03-19 03:44:15Z

1

You need to use relative lookup for the elements so

$('button.multi-column-2').click(function () {
    var $this = $(this);
    //use a relative search
    //we are finding the .cloneLayoutSelect ancestor of the clicked(referred by `this`) and is finding descendant elements with the attribute [data-multi-column="true"]
    var $elements = $this.closest('.cloneLayoutSelect').find('*[data-multi-column="true"]');
    $elements.each(function () {
        //for each element found we can read the data-label and value
        var $el = $(this),
            label = $el.data('label'),
            value = $el.val();
        console.log(label, value)
    })
})

Demo: Fiddle

answered Mar 19, 2015 at 3:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select Element with Data Attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related