Question

我试图显示按距离排序的搜索容器的结果（比较我和每个div数据之间的距离）。除resultArray.forEach(...);之外，其他所有功能均正常。

btnSearch.addEventListener("click", function(e){
    var inputBuscadorValue = inputBuscador.value;
    var infoDivBuscador = document.getElementsByClassName("div-info"); //a child of a child of mainDiv

    var resultArray = [];

    Array.prototype.forEach.call(infoDivBuscador , function(f){
        if (f.innerHTML.toLowerCase().search(inputBuscadorValue.toLowerCase()) == -1){
            f.parentNode.style.display = "none";
          }else{
            mainDiv.style.display = 'none';

            //It calculates the distance here (it works);                 

             resultArray.push({
               element: f.parentNode,
               distance: d
             });

        });

       resultArray.sort(function(a, b){return a.distance - b.distance});
       console.log(resultArray);

        mainDiv.innerHTML = "";

        resultArray.forEach(function(el) {
          mainDiv.appendChild(el);
          console.log(el); //doesn't log any
        })

        mainDiv.style.display = 'block';

}, false);

Answer 1

如评论中所述，mainDiv.appendChild(el)将导致类似...

TypeError：Node.appendChild的参数1没有实现接口Node。

因为您需要引用数组中的元素才能将其附加到DOM。同样，只有在resultArray方法找到匹配项的情况下，search()才会填充元素。因此，对我而言，在条件内移动该代码块是有意义的。没有您的html，就无法确切确定您的代码应该如何工作，但这是我在尝试（某种程度上）的工作娱乐方式：）

var btnSearch = document.getElementById("btnSearch");
var mainDiv = document.getElementById("mainDiv");
var d = 1;

btnSearch.addEventListener("click", function(e) {
  var inputBuscadorValue = inputBuscador.value;
  var infoDivBuscador = document.getElementsByClassName("div-info"); //a child of a child of mainDiv

  var resultArray = [];

  Array.prototype.forEach.call(infoDivBuscador, function(f) {
    if (f.innerHTML.toLowerCase().search(inputBuscadorValue.toLowerCase()) == -1) {
      f.parentNode.style.display = "none";
    } else {
      mainDiv.style.display = 'none';

      //It calculates the distance here (it works);                 
      console.log(f);
      resultArray.push({
        element: f.parentNode,
        distance: d
      });

      resultArray.sort(function(a, b) {
        return a.distance - b.distance
      });

      mainDiv.innerHTML = "";

      resultArray.forEach(function(el) {
        mainDiv.appendChild(el.element);
        console.log(el);
      });

      mainDiv.style.display = 'block';
    }

  }, false);
});

<div class="searchContainer">
  <input type="text" id="inputBuscador">
  <button type="button" id="btnSearch">
    Search
  </button>
</div>
<div id="mainDiv"></div>
<div class="info-parent">
  <div class="div-info">
    <span>Information div 1</span>
  </div>
</div>
<div class="info-parent">
  <div class="div-info">
    <span>Information div 2</span>
  </div>
</div>
<div class="info-parent">
  <div class="div-info">
    <span>Information div 3</span>
  </div>
</div>
<div class="info-parent">
  <div class="div-info">
    <span>Information div 4</span>
  </div>
</div>

为什么array.forEach（）在此代码中什么也不做？

1 个答案: