Question

我有一个带文字的DIV：

<div id="x">
  divText
</div>

我有一个这样的“标题行”：

var headerRow = ["wrong","wrongAgain","divText"];

我也有一个像这样的数组：

var theArray = [["blah","blah","0"]["notIt","blahblah","1"],["unrelated","dontLook","0"]];

我想根据div中的文本在theArray（2）中找到索引：

var theDiv = x.innerHTML;
for (i=0; i < headerRow.length; i++){
    if (headerRow[i] == theDiv){        <--never works
    if (headerRow[i] == x.innerHTML) {  <---never works
    if (headerRow[i] == "divText") {     <--works (i = 2)
}

如何基于div /变量的innerHTML查找索引（上面的前两种情况）？谢谢！

Answer 1

您使用的是innerHTML，它返回HTML元素的内容（包括空格和换行）。请使用innerText或在innerHTML或textContent上使用方法 trim 方法。

在您的情况下，比较不成功，因为使用innerHTML提取的文本包含空格和换行符。

注意：如果元素ID是有效的标识符，则可以直接用作 window.elementid 或只是 elementid ，但最好的方法是使用getElementByID

var x = document.getElementById('x')  
var theDiv = x.innerHTML.trim();
for (i=0; i < headerRow.length; i++){
    if (headerRow[i] == theDiv) {
              // your codes goes here
              console.log('works')
    }
}

或者您可以使用

var theDiv = x.innerText

或

var theDiv = x.textContent.trim()

Answer 2

<div id="x">
    divText
</div>


<script>
    
    var headerRow = ["wrong","wrongAgain","divText"];
    var theDiv = document.getElementById('x').innerHTML;
    console.log(theDiv);
    for (i=0; i < headerRow.length; i++){
        if (headerRow[i] == theDiv.trim()){
            console.log(headerRow.indexOf(headerRow[i]));
            console.log(i);
            
        }
        
    }
        
</script>

如果由于div的innerHTML文本中有多余的空格/换行而无法进行比较，则无法进行比较。因此，在将其与标题行数组的内容进行比较之前，需要修剪字符串。请注意，您可以使用indexOf方法获取匹配元素的索引，也可以仅使用i的当前值，该值也对应于该元素的索引。希望这对您有意义。

Answer 3

要从div中获取文本，您应该先通过id获取元素

var theDiv = document.getElementById("x").innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

它将与第1个数组一起使用，并且第2个嵌套数组可以先展平

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

在基于DIV文本的数组中查找索引

3 个答案: