CODEWITHSUNDEEP
jquery
KendoStarter
KendoStarter

Reputation: 139

How to Hide div based on data attribute

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.

Upvotes: 1

Views: 2832

Answers (4)

user3154108
user3154108

Reputation: 1294

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

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

Upvotes: 0

jvk
jvk

Reputation: 2201

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>

Upvotes: 0

Ashraf
Ashraf

Reputation: 2632

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>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 0

Related Questions