Question

我正在用动态编写带有javascript的html并将其存储在一个数组中。

["<div id="findme_u_13" name="someone" ><span style="… id="null" width="15px" height="15px"/></a></div>", "<div id="findme_u_1106" name="anotherone" ><span s… id="null" width="15px" height="15px"/></a></div>"]

之后我希望能够确定包含的完整项目的索引，即findme_u_somenumber。

我查看了indexof方法，但显然没有这样做。我想存储html的原因是为了加快追加到Dom并且一遍又一遍地跳过创建Html。有没有快速搜索数组中的1000个字符串并返回包含该值的字符串的索引？

Answer 1

您可以将数组中的HTML放在node中，然后使用查询选择器将其删除。这样你就可以在内存中遍历那一点HTML。这给出了问题的解决方案：

＆＃13;

var html_array = ['<div id="findme_u_13" name="someone" ><span id="null" width="15px" height="15px"></span></div>', '<div id="findme_u_1106" name="anotherone" ><span id="null" width="15px" height="15px"></span></div>'];

function retrieveIndexFromArray(indexNumber)
{
  var elementFound = -1; //
     var div = document.createElement("div"); //create an in-memory node.
     div.innerHTML = html_array.join(""); //add the string to it.
     var element = div.querySelector("#findme_u_"+indexNumber)
     if (element) //test if the string matches the index requested.
     {
         elementFound = element; //save the element

     }
console.log(element)
  return element; //return the element;
}

document.body.innerHTML += "Found element: " + retrieveIndexFromArray(13).outerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;"); //result

＆＃13;

我想知道你为什么要在一个数组中存储html。为什么不在数组中存储引用并使用HTML模板用正确的数据填充它。

Answer 2

indexOf肯定有效。我认为问题在于，当您应该使用单引号时（因为HTML中的双引号），您使用双引号来分隔元素。这将返回索引，或者返回false。

function findThis(arr, id) {
    for (var i = 0, len = arr.length; i < len; i++) {
       if (arr[i].indexOf(id) > -1) return i;
    }
    return false
}

findThis(arr, 'findme_u_1106') // 1

DEMO

Answer 3

找到一种更简单的方法，只需将变量中的html字符串连接起来，然后将其作为innerHTML附加到domnode。然后循环，创建和追加更快。 ; - ）

为了选择u_number，我发现它是属于客户端的静态数字，因此选择很容易。

感谢您的帮助。

在数组中查找项目的索引，其中项目包含子字符串

3 个答案: