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>