如何使用jQuery通過數據日期屬性選擇元素？

Question

我試圖為我嘗試使用的選擇器示例創建一個代碼片段，但它不起作用。 有人可以觀察它並告訴我我有什么問題嗎？

 var dateDiv = null; var expenseDate = "06/22/2016"; $(":data(date)").each(function() { var element = $(this); element.css("backgroundColor", element.data("color")); });

 .expense-item { margin-left: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="contentWrapper"> <div data-date="06/22/2016" data-color="red"> 06/22/2016 <div class="expense-body"> <div class="expense-item"> <p> This is an expense (1) </p> </div> <div class="expense-item"> <p> This is an expense (2) </p> </div> <div class="expense-item"> <p> This is an expense (3) </p> </div> </div> </div> <div data-expense-date="06/23/2016" data-color="blue"> <div class="expense-body"> 06/23/2016 <div class="expense-item"> <p> This is an expense (1) </p> </div> <div class="expense-item"> <p> This is an expense (2) </p> </div> </div> </div> <div data-expense-date="06/24/2016" data-color="yellow"> <div class="expense-body"> 06/24/2016 <div class="expense-item"> <p> This is an expense (1) </p> </div> <div class="expense-item"> <p> This is an expense (2) </p> </div> <div class="expense-item"> <p> This is an expense (3) </p> </div> <div class="expense-item"> <p> This is an expense (4) </p> </div> </div> </div> </div>

我的代碼受到這個例子的啟發： http : //api.jqueryui.com/data-selector/

Answer 1

你想要一個屬性選擇器：

$("[data-date]")

小提琴： https : //jsfiddle.net/j3cmo4ow/5/

如果你想讓:data偽選擇器工作，你需要包含 jQuery UI。

Answer 2

$("[data-color]").each(function() {
  var element = $(this);
  element.css("backgroundColor", element.attr('data-color'));
});

小提琴： https : //jsfiddle.net/j3cmo4ow/8/

Answer 3

您的選擇器問題$(":data(date)")您可以使用此選擇器選擇帶有date Data所有元素： $("*[data-date]")

var dateDiv = null;
var expenseDate = "06/22/2016";
$("*[data-date]").each(function() {
    var element = $(this);
    element.css("background-color", element.attr('data-color'));
});

---

 var dateDiv = null; var expenseDate = "06/22/2016"; $("*[data-date]").each(function() { var element = $(this); element.css("backgroundColor", element.data("color")); // Also works if you want. });

 .expense-item { margin-left: 15px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="contentWrapper"> <div data-date="06/22/2016" data-color="red"> 06/22/2016 <div class="expense-body"> <div class="expense-item"> <p> This is an expense (1) </p> </div> <div class="expense-item"> <p> This is an expense (2) </p> </div> <div class="expense-item"> <p> This is an expense (3) </p> </div> </div> </div> <div data-expense-date="06/23/2016" data-color="blue"> <div class="expense-body"> 06/23/2016 <div class="expense-item"> <p> This is an expense (1) </p> </div> <div class="expense-item"> <p> This is an expense (2) </p> </div> </div> </div> <div data-expense-date="06/24/2016" data-color="yellow"> <div class="expense-body"> 06/24/2016 <div class="expense-item"> <p> This is an expense (1) </p> </div> <div class="expense-item"> <p> This is an expense (2) </p> </div> <div class="expense-item"> <p> This is an expense (3) </p> </div> <div class="expense-item"> <p> This is an expense (4) </p> </div> </div> </div> </div>

Answer 4

這失敗了，因為 jQueryUI 庫是通過 http 調用的，而小提琴本身是通過 https 加載的。

因此該腳本被認為是不安全的。

當您在控制台打開的情況下運行您的小提琴時，您會看到以下錯誤：

Mixed Content: The page at 'https://jsfiddle.net/j3cmo4ow/4/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS.

Answer 5

:data()選擇器不能基於帶有前綴data-的 HTML 屬性工作。

相反，它匹配通過 jQuery 函數.data( "foo", value )存儲數據的元素。

Answer 6

請注意， :data()選擇器是 jQuery UI 的一部分，而不是核心 jQuery 庫的一部分，因此除非您包含 jQuery UI，否則該選擇器不會起作用。