How can I use jquery to select elements from array and add class?

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

P.S. 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>

Your selector is incorrect see api.jquery.com/has-attribute-selector $("data-node-tag".Collapsed[i]) need to change — Huangism
– Huangism, Commented May 7, 2018 at 14:57

Mojo Allmighty · Accepted Answer · 2018-05-07 15:08:19Z

2

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/

answered May 7, 2018 at 15:08

Mojo Allmighty

8138 silver badges18 bronze badges

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

Comments

Huangism · Accepted Answer · 2018-05-07 15:04:54Z

1

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>

answered May 7, 2018 at 15:04

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

1 Comment

carry0987 Over a year ago

Now I know how did array and elements selector work, thanks a lot !

awran5 · Accepted Answer · 2018-05-07 15:13:29Z

1

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] )

edited May 7, 2018 at 15:13

answered May 7, 2018 at 15:01

awran5

4,5962 gold badges17 silver badges32 bronze badges

Collectives™ on Stack Overflow

How can I use jquery to select elements from array and add class?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related