在函数中使用变量作为选择器

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 :

Answer 1

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> 

Answer 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.

Answer 3

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

要么

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