Use variable as selector in function

Question

On click, I want to get the name of the closest div and then look for all div's, that have this name attribute and add a class to them.

Here is my code:

HTML:

<div class="wrapper">
  <div class="container" name="button1">
    <div class="button">this is p #1</div>
  </div>
</div>

<div name="button1">
  somewhere else
</div>

JS:

$('.wrapper').on("click", '.button', function() {
   var attrname = $(this).closest('.container').attr('name');
   $("div[name=attrname]").each(function() {
     $(this).addClass("classtobeadded");
   });
});

But it is not working. So, how can I use the variable in here:

$("div[name=attrname]").each(function()

Here is the fiddle:

there is no attr name in .container because There is no name attribute for div elements. — Devsi Odedra
– Devsi Odedra, Commented Aug 8, 2019 at 9:09

Rory McCrossan · Accepted Answer · 2019-08-08 09:07:33Z

3

There's a few issues with your logic. Firstly the .container element does not have the name attribute, the .button does, so you don't need to use closest(). Secondly, you need to concatenate the actual name value in to the selector. Lastly div elements do not have a name attribute so the HTML is invalid. If you want to store custom meta-data on an element use a data attribute instead.

Also note that you don't need the each() loop, you can just call addClass() on the collection selected with the data-name attribute. Try this:

$('.wrapper').on("click", '.button', function() {
  var attrname = $(this).data('name');
  $('div[data-name="' + attrname + '"]').addClass("classtobeadded");
});

.classtobeadded {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="button" data-name="button1">this is p #1</div>
  </div>
</div>

<div data-name="button1">
  somewhere else
</div>

answered Aug 8, 2019 at 9:07

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

7 Comments

Carsten Løvbo Andersen Over a year ago

Can't see why you got the downvote. Sometimes I really wish we could see who it was.

nick zoum Over a year ago

@CarstenLøvboAndersen You could check for -1 in rep of people you suspect.

Rory McCrossan Over a year ago

@nickzoum I don't think you can see the rep history of other users, can you?

nick zoum Over a year ago

@RoryMcCrossan Activity>Reputation, It should be -1 downvoted

Rory McCrossan Over a year ago

Oh yeah, I never knew you could do that :) Thanks.

|

Rajaprabhu Aravindasamy · Accepted Answer · 2019-08-08 09:06:53Z

2

You have to concatenate it properly,

$(`div[name=${attrname}]`).each(function() {

And by the way, when looking at your code there is no attribute available in the closest div with a class .container. Check that as well.

answered Aug 8, 2019 at 9:06

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

2 Comments

Devsi Odedra Over a year ago

update your answer because There is no name attribute for div elements.

Rajaprabhu Aravindasamy Over a year ago

@DevsiOdedra I mentioned that in the answer. And now user has updated his question with a name attribute in his div. Thanks for letting me know that.

XuWang · Accepted Answer · 2019-08-08 09:08:43Z

2

$("div[name=" + attrname + "]").each(function() {})

or

$(`div[name=${attrname}]`).each(function() {})

answered Aug 8, 2019 at 9:08

XuWang

3591 silver badge7 bronze badges

Collectives™ on Stack Overflow

Use variable as selector in function

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related