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。

Answer 2

不要使用内联JS - 很难维护
使用jQuery＆＃39; s .find()为子节点添加sarch
与data-*属性和jQuery＆＃39; .data()方法

＆＃13;

function filtersLogic(evt){

    var mapListings = $('.map-listings').find("li"); // Use jQuery's .find()

    if ($(this).data("tabname") === "dWeb"){
        alert('fired')
        if (mapListings.length){
            alert(mapListings.length) 
        }
    }
}


$("#filtersLogic").on("click", filtersLogic);

＆＃13;

<ul class='map-listings'>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
<button id="filtersLogic" data-tabname="dWeb"> CLICK </button>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

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

2 个答案: