How to select element by data-date attribute with jQuery?

Question

I've tried to create a code snippet for an example of a selector I was trying to use and it's not working. Can someone eyeball it and tell me what I have wrong?

 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>

My code was inspired by this example: http://api.jqueryui.com/data-selector/

Answer 1

You want an attribute selector:

$("[data-date]")

Fiddle: https://jsfiddle.net/j3cmo4ow/5/

If you want the :data pseudo selector to work, you need to include jQuery UI.

Answer 2

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

Fiddle: https://jsfiddle.net/j3cmo4ow/8/

Answer 3

Your issue with selector $(":data(date)") you can select all elements with date Data using this selector : $("*[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

This fails, because the jQueryUI library is invoked over http, while the fiddle itself is loaded via https.

Therefore the script is considered as insecure.

When you run your fiddle with the console open you see the following error:

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

The :data() selector does not work based off of HTML attributes with the prefix data- .

Instead, it matches and elements that have data stored via the jQuery function .data( "foo", value ) .

Answer 6

请注意， :data()选择器是 jQuery UI 的一部分，而不是核心 jQuery 库的一部分，因此除非您包含 jQuery UI，否则该选择器不会起作用。