Question

我有一个html内容，可以找到：

<li data-id="87dhqsiu37fGyqUNA786d6F7=">

请注意数据属性值末尾的=符号

如何使用jQuery选择器选择它？

我尝试了这个没有成功：

$("li [data-id=87dhqsiu37fGyqUNA786d6F7]")
$("li [data-id=87dhqsiu37fGyqUNA786d6F7\=]")
$("li [data-id=87dhqsiu37fGyqUNA786d6F7\u003D]")
$("li [data-id=87dhqsiu37fGyqUNA786d6F7&#61;]")

每次都会给我一个语法错误（第一行除外，它没有找到该元素）。

Answer 1

li [data-id=...]表示“data-id ... <li>的任何元素，它是任何li[data-id=...]元素的后代”

您想要的是<li>，这意味着“data-id个...元素pod "RSMultiLanguage"属性，其值为var directiveProvider = angular.module('AppDirective',[]); directiveProvider.directive('addNewContact', function() { var custom_template = '<div id="" class="Edit-box"><h4>Contact</h4><div class="form-group">' + '<label class="col-sm-2 control-label" for="inputEmail3">First Name </label><div class="col-sm-4">' + '<input type="text" placeholder="Enter ..." class="form-control"></div>' + '<label class="col-sm-2 control-label" for="inputEmail3">Last Name</label><div class="col-sm-4">'+ '<input type="text" placeholder="Enter ..." class="form-control"></div></div>' + '<div class="form-group"><label class="col-sm-2 control-label" for="inputEmail3">Email</label>' + '<div class="col-sm-4">' + '<input type="email" placeholder="Enter email" id="exampleInputEmail1" class="form-control"></div>' + '<label class="col-sm-2 control-label" for="inputEmail3">Telephone</label><div class="col-sm-4">' + '<input type="text" placeholder="Enter ..." class="form-control"></div></div></div>'; return { restrict: 'AE', replace: true, template: custom_template, scope: { firstName: '=' }, link: function ($scope, elem, attr, ctrl) { console.debug($scope); } }; });”。

这不是任何特定库的问题，这就是CSS选择器的工作方式。

Answer 2

根据css选择器$("li [data-id=87dhqsiu37fGyqUNA786d6F7]")表示具有data-id属性但在<li>的子项中的任何元素。

但是这里<li> itselt是一个data-id属性的元素。

所以正确的语法是

$('li[data-id="87dhqsiu37fGyqUNA786d6F7="]')

只是一个简单的CSS选择器语法问题。

数据属性值中的特殊字符

2 个答案: