How to Hide div based on data attribute

Question

I tried below code but it is not working. i think slick-index is causing issue.

<div class="class1 class2" data-slick-index="1">
<a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
<a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
<a href="#" class="active" rel="">
My Text3
</a>
</div>

$(document).ready(function() {
$('div.class1').hide().filter(function(){
    var d = $(this).data();
    alert(d.slick-index);
    return d.slick-index == '3';
}).hide();

});

Where is the problem in code.

What are `index` and `d.slick`? Which elements do you want to hide? — 31piy, Aug 02 '18 at 08:26

score 1 · Accepted Answer · answered Aug 02 '18 at 08:32

Corrected your code , Check :

$(document).ready(function() {
$('div.class1').filter(function(){
    return $(this).attr('data-slick-index') == '3';
}).hide();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1 class2" data-slick-index="1">
<a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
<a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
<a href="#" class="active" rel="">
My Text3
</a>
</div>

score 0 · Answer 2 · answered Aug 02 '18 at 08:28

You have to use d["slickIndex"]

$(this).data() converts data-slick-index into slickIndex

demo

$(document).ready(function() {
  $('div.class1').filter(function() {
    var d = $(this).data();
    console.log(d["slickIndex"]);
    return d["slickIndex"] == 3;
  }).hide();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1 class2" data-slick-index="1">
  <a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
  <a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
  <a href="#" class="active" rel="">
My Text3
</a>
</div>

score 0 · Answer 3 · answered Aug 02 '18 at 08:35

You have given data attr was wrong,

jQuery: get data attribute

      $(document).ready(function() {
        $('div.class1').filter(function(){
          var d = $(this).data('slick-index');
          return d == '3';
        }).hide();
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1 class2" data-slick-index="1">
<a href="#" class="active" rel="">
My Text1
</a>
</div>

<div class="class1 class2" data-slick-index="2">
<a href="#" class="active" rel="">
My Text2
</a>
</div>

<div class="class1 class2" data-slick-index="3">
<a href="#" class="active" rel="">
My Text3
</a>
</div>

score 0 · Answer 4 · answered Aug 02 '18 at 09:12

0

Just a note: You could use CSS if it were just about the hiding.

.class1.class2[data-slick-index="3"]{
    display: none;
}

answered Aug 02 '18 at 09:12

user3154108

1,264
13
23

How to Hide div based on data attribute

4 Answers4