如何使用jquery从数组中选择元素并添加类？

Question

I want to add "hide" class to the child-element according to father-element's data-node-tag from array,I have try to console.log the array and got the array, but I can't use that array's value to add class on it..

PS That array is from cookie named collapsed_Nodes , and I have split it.

I use js.cookie and jquery , here is my JS Fiddle

 $(document).ready(function() { var adjustCookie = function() { var tags = []; $('.accordion_container .hide').each(function() { var tag = $(this).prev('.accordion_head').data("node-tag"); tags.push(tag.replace('#', '#')); }); if (tags.length) { Cookies.set('collapsed_Nodes', tags.join('|'), { expires: 7 }); } else { Cookies.remove('collapsed_Nodes'); } } $(".accordion_head").click(function() { var tag = $(this).data("node-tag"); if ($(this).next(".accordion_body").is(':visible')) { $(this).next(".accordion_body").slideUp(300); $(this).next(".accordion_body").addClass("hide"); $(this).children(".plusminus").text('+'); } else { $(this).next(".accordion_body").slideDown(300); $(this).next(".accordion_body").removeClass("hide"); $(this).children(".plusminus").text('-'); } adjustCookie(); }); if (document.cookie.indexOf('collapsed_Nodes') >= 0) { var getCollapsed = Cookies.get('collapsed_Nodes'); var Collapsed = getCollapsed.split('|'); var arrayLength = Collapsed.length; for (var i = 0; i < arrayLength; i++) { $("data-node-tag".Collapsed[i]).next(".accordion_body").addClass("hide"); } } }); 

 .accordion_container { width: 500px; } .accordion_head { background-color: skyblue; color: white; cursor: pointer; font-family: arial; font-size: 14px; margin: 0 0 1px 0; padding: 7px 11px; font-weight: bold; } .accordion_body { background: lightgray; } .accordion_body p { padding: 18px 5px; margin: 0px; } .plusminus { float: right; } .hide { display: none; } 

 <div class="accordion_container"> <div class="accordion_head" data-node-tag="#1">First Accordian Head<span class="plusminus">-</span> </div> <div class="accordion_body"> <p>First Accordian Body, it will have description</p> </div> <div class="accordion_head" data-node-tag="#2">Second Accordian Head<span class="plusminus">-</span> </div> <div class="accordion_body"> <p>Second Accordian Body, it will have description</p> </div> <div class="accordion_head" data-node-tag="#3">Third Accordian Head<span class="plusminus">-</span> </div> <div class="accordion_body"> <p>Third Accordian Body, it will have description</p> </div> </div> 

Answer 1

Another approach would be selecting the div by the attribute value:

$('[data-node-tag="'+checkCollapsed[i]+'"]').next(".accordion_body").addClass("hide");

JSFiddle: https://jsfiddle.net/yuvakqha/22/

Answer 2

Try to change this:

$("data-node-tag".Collapsed[i]).next(".accordion_body").addClass("hide");

To this:

$(Collapsed[i]).next(".accordion_body").addClass("hide");

---

The Collapsed variable will output array after .split()

 Array [ "#2", "#3" ] 

And after your for loop, the output will be:

 #2 #3 

So you can select that with jQuery selector like any ID

 $( Collapsed[i] ) 

Answer 3

Your selector is wrong, the class must come before the attribute and the attribute should be in brackets []

Use

$("." + Collapsed[i] + [data-node-tag]).next(..).addClass("hide")

https://api.jquery.com/has-attribute-selector/

Selects elements that have the specified attribute, with any value.

Here is a simplified example

 $(".accordion_head[data-node-tag]").addClass("red"); 

 .red { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion_container"> <div class="accordion_head" data-node-tag="#1">First Accordian Head<span class="plusminus">-</span> </div> <div class="accordion_body"> <p>First Accordian Body, it will have description</p> </div> <div class="accordion_head" data-node-tag="#2">Second Accordian Head<span class="plusminus">-</span> </div> <div class="accordion_body"> <p>Second Accordian Body, it will have description</p> </div> <div class="accordion_head" data-node-tag="#3">Third Accordian Head<span class="plusminus">-</span> </div> <div class="accordion_body"> <p>Third Accordian Body, it will have description</p> </div> </div>