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

admin管理员组

文章数量:1406976

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=".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>

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./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./data-selector/

• javascript
• jquery
• custom-data-attribute
• html-dataset

Share Follow edited Dec 24, 2019 at 17:35 Goran Stoyanov 2,31111 gold badge2222 silver badges3232 bronze badges asked May 11, 2016 at 18:52 clockwiseqclockwiseq 4,22999 gold badges4141 silver badges6767 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

You want an attribute selector:

$("[data-date]")

Fiddle: https://jsfiddle/j3cmo4ow/5/

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

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

Fiddle: https://jsfiddle/j3cmo4ow/8/

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

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/j3cmo4ow/4/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis./ajax/libs/jqueryui/1.8.9/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS.

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

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.

本文标签： javascriptHow to select element by datadate attribute with jQueryStack Overflow