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

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 4

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 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

Note, that the :data() selector is part of jQuery UI, and not part of the core jQuery library, so unless you include jQuery UI, that selector is not expected to work.