jQuery 查找具有非空数据属性的元素

Question

我很少有像这样包含数据属性的元素：

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

他们我尝试使用类似的东西：

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

基本上我想在所有设置了数据值的项目上设置填充，如果数据值是空的，不要管它。

Answer 1

使用.filter()

这可能会让您入门

$('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>

Answer 2

一种方式：

$("#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>

jQuery 查找具有非空数据属性的元素

jQuery Find elements with non empty data attribute

jquery

jquery-selectors