• 使用HTML5的自定义数据属性上的jQuery选择器

    JavaScript

    JinJinNear

    2020-03-11

    我想知道HTML5随附的这些数据属性有哪些选择器。

    以这段HTML为例：

    <ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

    是否有选择器获得：

    • 与所有元素data-company="Microsoft"下方"Companies"
    • 与所有元素data-company!="Microsoft"下方"Companies"
    • 在其他情况下，可以使用其他选择器，例如“包含，小于，大于，等等...”。

    第814篇《使用HTML5的自定义数据属性上的jQuery选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

    共1个回答
    路易伽罗 2020.03.11

    jQuery UI有一个:data()选择器，也可以使用。从1.7.0版开始就出现了。

    您可以像这样使用它：

    获取具有data-company属性的所有元素

    var companyElements = $("ul:data(group) li:data(company)");

    获取data-company等于的所有元素Microsoft

    var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

    获取所有data-company不相等的元素Microsoft

    var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

    等等...

    新:data()选择器的一个警告是，必须通过代码设置data值才能选择它。这意味着，要使以上内容起作用，仅以HTML 定义是不够的。您必须首先执行以下操作：data

    $("li").first().data("company", "Microsoft");

    对于您可能以$(...).data("datakey", "value")这种方式或类似方式使用的单页应用程序来说，这很好。

    相似问题

    0 回答

    0 回答

    5 回答

    25 回答

    0 回答

    0 回答

    问题类别

    JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android