javascript - 将新节点添加到 DOM 中并检查它们是否存在

Question

我有一个添加新 <li> 的函数元素动态地添加到 DOM 中。完成后，DOM 看起来与此类似，但有更多 <li>标签:

<ul class='map-listings'>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

我有一个按钮<button onclick="filtersLogic(evt, 'dWeb')">和一个如下所示的函数:

function filtersLogic(evt, tabName){
    var i;
    var mapListings = $('.map-listings').childNodes;
    alert('clicked')
    if (tabName == 'dWeb'){
        alert('fired')
        if (mapListings.length != 0){
            alert(mapListings.length) 
        }
    }
}

到目前为止，我可以一直到达我的函数发出警报的点 'fired'但 mapListings.length 没有出现任何内容.

Answer 1

以下代码将获取 <li> 的列表<ul class="map-listings"> 内的元素元素。

然后它会更改每个元素的背景色和前景色。

function filtersLogic(event, tabName){
  if (tabName == 'dWeb'){
    var els = document.querySelectorAll('.map-listings > li');
    console.log('Elements found:', els.length) 
    els.forEach(
      function(el) {
        el.style.backgroundColor = "black";
        el.style.color = "white";
      }
    );
  }
}

<button onclick="filtersLogic(event, 'dWeb')">click me</button>
<ul class='map-listings'>
 <li>jdfkajdl</li>
 <li>fdsafsadf</li>
 <li>gfdsgdfsg</li>
 <li>trewrew</li>
 <li>ghfddfg</li>
</ul>

如果你想将其保留为 jQuery，那么使用这个:

function filtersLogic(event, tabName){
  if (tabName == 'dWeb'){
    var els = $('.map-listings > li');
    console.log('Elements found:', els.length) 
    els.css('backgroundColor', 'black');
    els.css('color', 'white');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="filtersLogic(event, 'dWeb')">click me</button>
<ul class='map-listings'>
 <li>jdfkajdl</li>
 <li>fdsafsadf</li>
 <li>gfdsgdfsg</li>
 <li>trewrew</li>
 <li>ghfddfg</li>
</ul>

我只是喜欢尽可能远离 jQuery。