Question

I have a list containing list items with a data attribute like this:

<ul>
    <li data-c="usa">...</li>
    <li data-c="russia">...</li>
    <li data-c="usa">...</li>
</ul>

Then I clone/append with jQuery the items that belong to a specific data attribute:

var c = $(".select option:selected" ).text();
$("li[data-c='" + c + "']").clone().appendTo(".someClass" );

It works just fine.

Now I would like to add a second data attribute like this:

<ul>
    <li data-c="usa"    data-t="1940">...</li>
    <li data-c="russia" data-t="1940">...</li>
    <li data-c="usa"    data-t="2014">...</li>
</ul>

My jQuery would start like this:

var c=$( ".select1 option:selected" ).text();
var t=$( ".select2 option:selected" ).text();
....

How could I edit the clone/append part in order to get items that are matching both c and t?

Thank you

Was it helpful?

Solution

You may try this (Example):

var c = 'usa', t = '1940';
$("li[data-c='" + c + "'][data-t='" + t + "']").clone().appendTo(".someClass" );

Elements that matches both data attribute will be cloned and appended.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top