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>