在多个类上搜索数据

Question

我正在尝试 select 我的所有 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() to use a CSS selector that returns a node list of all elements that match the selector. The CSS Attribute Selector就是你想要的

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);
});

<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>

Answer 2

至 select where data-info = false，您可以使用属性 select 或：

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

查看this link了解更多

Answer 3

"right" 答案取决于您将如何处理虚假元素。如果您正在控制它们的格式（包括 "hidden"），则应将 data-info= 属性更改为 class= assignments。 HTML 元素可以有多个 class。如果这样做，则可以使用 "GetElementByClassName('false')".

找到错误元素

如果您正在对找到的元素进行数字运算，那么保留 data-info= 分配将被认为是正确的，并且可以使用其他答案中提供的方法之一找到这些元素。

Answer 4

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

<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>

在多个类上搜索数据

Searching data on multiple classes

javascript

jquery

dataset

getelementbyid

在多个 类 上搜索数据

Searching data on multiple classes

javascript

jquery

dataset

getelementbyid

在多个类上搜索数据