jQuery Find elements with non empty data attribute

Question

I have few elements that contain data-attribute like so:

<div id="container">
  <div class="item" data-value="1"></div>
  <div class="item" data-value="2"></div>
  <div class="item" data-value=""></div>
</div>

Them I try to use something like:

$("#container").find("[data-value]:not(empty)").css({"padding":10});

Basically I want to set padding on all items that have data-values set, if data-values is empty, leave it alone.

what is the error you are facing? does it throw errors in the console? does it not work at all? or does it work select the wrong elements? or is the css not shown right? — Neville Nazerane
– Neville Nazerane, Commented Jul 6, 2016 at 20:49

cssyphus · Accepted Answer · 2016-07-06 20:47:56Z

3

Use .filter()

This might get you started

$('button').click(function(){
   $('div.item').filter(function(i){
      return $(this).attr('data-value') != "";
   }).css('background','yellow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
  <div class="item" data-value="1">One</div>
  <div class="item" data-value="2">Two</div>
  <div class="item" data-value="">Three</div>
  <div class="item" data-value="3">Four</div>
  <div class="item" data-value="">Five</div>
  <div class="item" data-value="4">Six</div>
  <div class="item" data-value="">Seven</div>
</div>
<button>Find MT Data</button>

answered Jul 6, 2016 at 20:47

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

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

Comments

j08691 · Accepted Answer · 2016-07-06 20:48:55Z

1

One way:

$("#container").children().filter(function() {
  return $(this).data('value')
}).css({
  "padding": "10px"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="item" data-value="1">1</div>
  <div class="item" data-value="2">2</div>
  <div class="item" data-value="">3</div>
</div>

answered Jul 6, 2016 at 20:48

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

jQuery Find elements with non empty data attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related