jQuery不工作的数据选择器

Question

我试图创建一个JSFiddle，作为我试图使用的选择器的一个例子，它不起作用。有人可以注视它并告诉我我的错误吗？

这是小提琴： https://jsfiddle.net/j3cmo4ow/4/

我的代码受此示例的启发： http://api.jqueryui.com/data-selector/

$(":data(date)").each(function() {
  var element = $(this);
  element.css("backgroundColor", element.data("color"));
});

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 {/ 1>选择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>

FIND: ^.{105}.*(.)
REPLACE: \r\n

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( "foo", value )的HTML属性。

相反，它匹配和通过jQuery函数sudo mysql -u root -h 127.0.0.1 -p Enter password: (aliatory password) 存储数据的元素。

Answer 6

注意，:data()选择器是jQuery UI的一部分，而不是核心jQuery库的一部分，所以除非你包含jQuery UI，否则该选择器不会起作用。