CODEWITHSUNDEEP
javascriptjquery
kasiam
kasiam

Reputation: 38

match elements by data attribute and id

I am looking for a way to compare elements using jQuery. Basically for every element with a certain data attribute, I want to "appendChild" another element that has a matching ID.

So in the following example, 'a' has a data attribute of data-dropdown="drop-delivery-options". The second element has an ID="drop-delivery-options", so they match. I can select elements with this ID but how do I select elements that match data-attributes/IDs?

So a function that would be like: 

If elementA[data-attribute] = elementB[ID] { 
    (elementA).appendChild(elementB) 
}

<a href="#" data-dropdown="drop-delivery-options" class="button">Add Option</a>

<div id="drop-delivery-options" data-dropdown-content class="f-dropdown content table-options drop-delivery-options">
    <ul>
        <li><a href="#">Add Deposit Account</a></li>
        <li><a href="#">Add Cash Pickup</a></li>
        <li><a href="#">Send to Card</a></li>
        <li><a href="#">Add Home Delivery</a></li>
    </ul>
</div>

Upvotes: 1

Views: 254

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337666

You can use the data-dropdown attribute to select the select element, then use appendTo() to append it to the a. Note though that given your example you will end up with nested a elements, which is invalid. You should look to change the parent a element to something else.

$('.button').click(function() {
    $('#' + $(this).data('dropdown')).appendTo(this);
});

Working example

Upvotes: 1

Related Questions