jQuery any element where data attribute is not

Question

My code:

$(".tags li").click(function() {
  var catid = $(this).data("catid");
  $("[data-category!="+ catid + "]").hide();
  $("[data-category="+ catid + "]").show();
});

jQuery documentation states that is better to use the .not() method. But how do I apply .not() to any element that has the data-category attribute?

$(".tags li").not("[data-category="+ catid + "]").show();? — guradio
– guradio, Commented Feb 22, 2018 at 2:13
No, the li has catid data attribute. I'm looking to hide any elements (div's, section's, etc.) with category data attribute. — Pim
– Pim, Commented Feb 22, 2018 at 2:14
I can't. There's a whole bunch of elements with data-category. I need to hide those. Not the li's that have data-catid. — Pim
– Pim, Commented Feb 22, 2018 at 2:18
don't use data attributes as selectors, it is much slower than using classes. — Yevgeniy Afanasyev
– Yevgeniy Afanasyev, Commented Feb 22, 2018 at 3:15

SAMUEL · Accepted Answer · 2018-02-22 02:31:16Z

1

not Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value. if i understand you correctly this will help you

$(".tags li").on("click", function() {
  var catid = $(this).data("catid");
  $("[data-category=" + catid + "]").show();
  $("[data-category]").not("[data-category=" + catid + "]").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tags">
  <li data-catid="1">Category 1</li>
  <li data-catid="2"> Category 2</li>
</ul>

  <div data-category="1">
    Category 1 Item
  </div>
  <div data-category="1">
    Category 1 Item
  </div>
  <div data-category="2">
    Category 2 Item
  </div>

edited Feb 22, 2018 at 2:31

answered Feb 22, 2018 at 2:28

SAMUEL

8,6223 gold badges46 silver badges44 bronze badges

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

2 Comments

Pim Over a year ago

It could, but there are many different parts of the page with data-category attribute. What I'm looking for is a simple snippet to hide those, without adding further markup to the page.

SAMUEL Over a year ago

You can also make it work without changing any markup i had updated the answer

Collectives™ on Stack Overflow

jQuery any element where data attribute is not

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related