Question

我正在尝试选择data-info为false的所有div。

<div class="rows" data-info="false" id="test"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="false"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="false"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="true"></div>
<div class="lite" data-info="false"></div>
<div class="rows" data-info="true"></div>

我添加了一个用于测试的ID，它运行良好：

var test = document.getElementById('test');
var dataFalse = test.dataset.info;

如果我console.log(dataFalse)，我得到false，这是正确的。

但我希望使用我的所有类进行搜索，如果有一些数据信息是假的，则不是单个id。

尝试与getElementByClassName一样不起作用，我也尝试用$(".rows")和其他东西替换它，但仍然不起作用，我想知道我错过了什么。

Answer 1

.getElementById仅查找与id匹配的第一个元素。毕竟，文档中应该只有一个具有给定id的元素。

使用 .querySelectorAll() 来使用CSS选择器，该选择器返回与选择器匹配的所有元素的节点列表。 CSS Attribute Selector 就是您想要的。

＆＃13;

var theDivs = document.querySelectorAll("[data-info=false]");
console.log("Matching div count: " + theDivs.length);

// Just for fun
[].slice.call(theDivs).forEach(function(div){
  console.log("Matching element:", div);
});

＆＃13;

<div class="rows" data-info="false" id="test"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="false"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="false"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="true"></div>
<div class="lite" data-info="false"></div>
<div class="rows" data-info="true"></div>

＆＃13;

Answer 2

要选择data-info = false的位置，您可以使用属性选择器：

$("[data-info=false]")

有关详情，请参阅this link

Answer 3

＆＃13;

 $(document).ready(function () {
$("div[data-info=false]").html("false");
     });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="rows" data-info="false" id="test"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="false"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="false"></div>
<div class="lite" data-info="true"></div>
<div class="rows" data-info="true"></div>
<div class="lite" data-info="false"></div>
<div class="rows" data-info="true"></div>

＆＃13;

Answer 4

“正确”的答案取决于你将如何处理虚假元素。如果您正在控制其格式（包括“隐藏”），则应将data-info =属性更改为class = assignments。可以为HTML元素提供多个类。如果这样做，则可以使用“GetElementByClassName（'false'）”找到false元素。

如果您使用找到的元素进行数字化处理，那么保持data-info =赋值将被认为是正确的，并且可以使用其他答案中提供的方法之一找到这些元素。

搜索多个类的数据

4 个答案: