Question

我需要隐藏li有一个没有jquery的span孩子，我该怎么办？

<ul class="select2-results__options" role="tree" id="select2-upsell_ids-results">
  <li class="select2-results__option">first (#404)</li>
  <li class="select2-results__option" >second (#496)</li>
  <li class="select2-results__option">abc (#2482)</li>
  <li class="select2-results__option">defg (#2484)<span class="description">Size: 47</span></li>
  <li class="select2-results__option">hil (#2485)<span class="description">Size: 46,5</span></li>
</ul>

Answer 1

公平地说，@j08691's answer完全有效且整洁，绝对不是jQuery。

但是，如果@Geme不喜欢它，请查看下面的代码。相信我下面的代码都不包含任何jQuery。

您可以循环浏览每个span的{{1}}，检查每个li内是否有childNodes元素。

如果li的构造函数为childNode，则它是HTMLSpanElement元素。

span

var lists = document.getElementsByClassName('select2-results__option'); // NOT JQUERY
var i = 0;
var x = 0;

// NOT JQUERY AT ALL
for (; i < lists.length; i++)
  for (; x < lists[i].childNodes.length; x++)
    if (lists[i].childNodes[x].constructor === HTMLSpanElement){
      lists[i].style.display = 'none';
      break;
    }

/* ALTERNATIVE */

// NOT JQUERY TOO
Array.prototype.forEach.call(lists, function(li){
  var child = li.childNodes,
      i = 0,
      len = child.length;
  for (; i < len; i++)
    if (child[i].constructor === HTMLSpanElement)
      li.style.display = 'none';
});

Answer 2

您可以使用document.querySelectorAll('li > span')选择元素，然后循环隐藏它们。

var items = document.querySelectorAll('li > span')
for (var item of items) {
  item.parentNode.style.display = 'none';
}

<ul class="select2-results__options" role="tree" id="select2-upsell_ids-results">
  <li class="select2-results__option">first (#404)</li>
  <li class="select2-results__option">second (#496)</li>
  <li class="select2-results__option">abc (#2482)</li>
  <li class="select2-results__option">defg (#2484)<span class="description">Size: 47</span></li>
  <li class="select2-results__option">hil (#2485)<span class="description">Size: 46,5</span></li>
</ul>

隐藏李有跨越孩子没有jquery

2 个答案: