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

【问题标题】：How to select element by data-date attribute with jQuery?如何使用 jQuery 按数据日期属性选择元素？
【发布时间】：2019-12-25 01:35:45
【问题描述】：

我尝试为我尝试使用的选择器示例创建代码 sn-p，但它不起作用。有人可以看看它并告诉我我有什么问题吗？

  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/

【问题讨论】：

标签： javascript jquery custom-data-attribute html-dataset

【解决方案1】：

你想要一个属性选择器：

$("[data-date]")

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

如果你想让:data 伪选择器工作，你需要包含jQuery UI。

【讨论】：

完美！非常感谢！

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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.

【讨论】：

很高兴知道这一点。我认为这可能是根本问题，但 tymeJV 总体上回答了我的问题。感谢您的回复。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

【讨论】：