如何使用jQuery通过data-date属性选择元素？

Question

我已尝试为我尝试使用的选择器的示例创建代码段，但该代码段不起作用。有人可以看一下，告诉我我有什么毛病吗？

  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/

Answer 1

您需要属性选择器：

$("[data-date]")

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

如果要使:data伪选择器起作用，则需要包括jQuery UI。

Answer 2

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

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

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

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

Answer 5

:data()选择器无法基于带有前缀data-的HTML属性工作。

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

Answer 6

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