Loop function class name with jquery

Question

I have to following code:

$( ".content.one" ).clone().appendTo( ".cat.one .details" );
$( ".content.two" ).clone().appendTo( ".cat.two .details" );
$( ".content.three" ).clone().appendTo( ".cat.three .details" );

I wanted to loop this like

var obj = {
one: 'one',
two: 'two',
three: 'three'
};
$.each(obj, function (index, value) {
  $( ".content.(value)" ).clone().appendTo( ".cat.(value) .details" );
});

But I can't find out how to use the "value" inside the classes

Nikhil Aggarwal · Accepted Answer · 2019-05-06 09:42:06Z

1

Use Template literals

var obj = {one: 'one',two: 'two',three: 'three'};

$.each( obj, function( key, value ) {
  $(`.content.${value}`).clone().appendTo(`.cat.${value} .details`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="content one">One</div>
<div class="content two">Two</div>
<div class="content three">Three</div>

<br/>
<div class="cat one"><div class="details"></div></div>
<div class="cat two"><div class="details"></div></div>
<div class="cat three"><div class="details"></div></div>

Note: obj is an object and as per jQuery.each, callback will be passed key and value as arguments rather than index and value.

answered May 6, 2019 at 9:42

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

2 Comments

Maximilian Neuse Over a year ago

Yes perfect. But there is one problem. The background of my code is, I want to copy content elements in categories. Content can also have 2 or more categories, so can appear in different categories. But now if one has 2 or more categories (one, two, three) it appears double. See the full codepen: codepen.io/anon/pen/pmvzgY - see in my example, "Content 2a, 1e" appears 2x in Category 2

Nikhil Aggarwal Over a year ago

It is happening because, during 1st iteration for one, element with both one and two classes has been copied inside category. Now, when you run it for two, there are 2 elements matching the search criteria. You can update the selection to $(.hidden .content.${value}) to avoid the duplicate copies. For reference - codepen.io/anon/pen/mYybaj

Nitigna Raval · Accepted Answer · 2019-05-06 10:06:23Z

0

You can use the code given below.

$(".content ." + value).clone().appendTo(".cat ." + value + " .details");

If the it dosen't help request to share entire code.

answered May 6, 2019 at 10:06

Nitigna Raval

11 bronze badge

2 Comments

Maximilian Neuse Over a year ago

thanks, but unfortunalety it is not working: codepen.io/anon/pen/vwEBaR - I am trying to categorized content-divs. The codepen should it make a bit clearer

Nitigna Raval Over a year ago

sorry. the issue is with the spaces in the script. Check the working codepen script codepen.io/nitigna09/pen/QRbKLK

Collectives™ on Stack Overflow

Loop function class name with jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related