javascript - 如何找到特定的数据属性？

Question

这个问题已经有答案了:

jQuery Attribute selector with a period (4 个回答)

已关闭 5 年前。

我想添加或删除li s 到 javascript 中的列表。为此，我发现我需要添加数据属性并查找具有该值的项目。

if ($('li[data-requestId=' + requestId + ']').length == 0)
{
    var element = getRequestElement();
    var li = document.createElement("li");
    li.setAttribute("data-requestId",requestId);
    li.appendChild(element);
    $('#requestsUL').append(li);
}

但是第一行给出了这个错误:

Syntax error, unrecognized expression: li[data-requestId=6.22.20]

Answer 1

您好，这里有一种方法，可以让您根据 data-requestId 读取 ul 标记内的所有元素。

我使用变量将 li[data-requestId=""] 与 requestId 连接起来:

var dataSelector='li[data-requestId="' + requestId + '"]';

通过这种方式，upi 确保选择器完全是一个字符串，因此它可以在逻辑上工作。最后这里是一个代码片段，它演示了我所说的所有内容:

$(function(){

var liSize=$("ul").children().length;

for(var requestId=1;requestId<=liSize;requestId++)
{
var dataSelector='li[data-requestId="' + requestId + '"]';
console.log($(dataSelector).text());
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-requestId=1>Item 1 </li>
  <li data-requestId=2>Item 2 </li>
  <li data-requestId=3>Item 3 </li>
  <li data-requestId=4></li>
</ul>