Question

我写这篇文章是为了寻求解决方案。例如，我有这个html代码

<dl class="rpg-dll">
 <dt><span>Character</span> :</dt>
 <dd class="rpg-l">
  <span><span><img src="IMAGE.PNG" /></span></span>
</dd>
</dl>

一式三份，但没有<'img>

<dl class="rpg-dll">
 <dt><span>Character</span> :</dt>
 <dd class="rpg-l">
  <span><span>NO IMAGE</span></span>
</dd>
</dl>

如果其中没有<'img>，如何隐藏整个<'dl>？我的意思是，我随机选择只显示一个，然后隐藏其他。

Answer 1

对于jQuery解决方案可以使用

selectAllow: function(info) {
    if (info.start.isBefore(moment()))
        return false;
    return true;          
}

$('.rpg-dll').not(':has(img)').hide()// or remove() to take it out completely

Answer 2

对于非jQuery解决方案，您可以使用element.querySelectorAll().length检查元素是否包含图片：

Array.from(document.querySelectorAll("dl.rpg-dll")).forEach(el => {
  let hasImage = el.querySelectorAll("img").length > 0;
  if(!hasImage) el.style.display = "none";
});

<dl class="rpg-dll">
 <dt><span>Character</span> :</dt>
 <dd class="rpg-l">
  <span><span><img src="https://placehold.it/300" /></span></span>
</dd>
</dl>

<dl class="rpg-dll">
 <dt><span>Character</span> :</dt>
 <dd class="rpg-l">
  <span><span>NO IMAGE</span></span>
</dd>
</dl>

<dl class="rpg-dll">
 <dt><span>Character</span> :</dt>
 <dd class="rpg-l">
  <span><span>NO IMAGE</span></span>
</dd>
</dl>

<dl class="rpg-dll">
 <dt><span>Character</span> :</dt>
 <dd class="rpg-l">
  <span><span>NO IMAGE</span></span>
</dd>
</dl>

如果其中没有<img/>内容，则隐藏<dl>

2 个答案: