如何使用jQuery按数据日期属性选择元素

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

本文关键字：属性 选择 元素 日期 数据 何使用 jQuery      更新时间：2023-09-26

我试图为我试图使用的选择器示例创建一个代码片段，但它不起作用。有人能不能看一下，告诉我我做错了什么？

  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/

您想要一个属性选择器：

$("[data-date]")

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

如果希望:data伪选择器工作，则需要包含jQuery UI。

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

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

选择器$(":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>

这失败了，因为jQueryUI库是通过http调用的，而fiddle本身是通过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.

:data()选择器不能基于前缀为data-的HTML属性工作。

相反，它匹配具有通过jQuery函数.data( "foo", value )存储的数据的和元素。

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

相关文章：