如果此 div 内的元素(跨度)为空,则不显示 div
Posted
技术标签:
【中文标题】如果此 div 内的元素(跨度)为空,则不显示 div【英文标题】:Display none a div if a element (span) inside this div is empty 【发布时间】:2018-07-20 11:15:47 【问题描述】:如果此 div 中的 span
元素为空,我想在 div
上设置 display: none
。
<div class="mydiv test1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/1200px-Googlelogo.png" >
<span id="myid"></span>
</div>
<div class="mydiv test2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/1200px-Googlelogo.png" >
<span id="myid">100</span>
</div>
在这个例子中,我想在第一个div
上设置display: none
。如何使用 jQuery 做到这一点?
【问题讨论】:
请先尝试再询问 你不能自己做这个吗?看起来很简单...... 我们总是乐于帮助和支持新的编码员,但您需要先帮助自己。在doing more research 之后,如果您有问题,请发布您尝试过的内容,并清楚说明哪些内容不起作用并提供a Minimal, Complete, and Verifiable example。阅读'How to Ask a good question' guide。另外,请务必take the tour 并阅读this 如果大家的答案都错了,如果你有正确的答案,请发布。 【参考方案1】:$(document).ready(function()
$('.mydiv').each(function()
var eleSpan = $(this).children().siblings("span");
if (eleSpan.html().trim().length === 0)
$(this).hide();
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv test1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/1200px-Googlelogo.png" >
<span id="myid"></span>
</div>
<div class="mydiv test2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/1200px-Googlelogo.png" >
<span id="myid">100</span>
</div>
【讨论】:
【参考方案2】:遍历所有作为 div 子元素的 span,如果它们为空,则将父 (div) CSS 显示变量设置为 none。
$.each($('div > span'), function(index)
if($(this).is(':empty'))
$(this).parent().css('display', 'none');
);
【讨论】:
【参考方案3】:查看 cmets inline 并且您永远不应该有具有重复 id
值的元素。
// Get all the span elements into an array
var spans = Array.prototype.slice.call(document.querySelectorAll("span"));
// Loop over the span elements
spans.forEach(function(span)
// Check to see if there is any text content
if(span.textContent === "")
span.parentElement.classList.add("hidden"); // Hide the parent
);
.hidden display:none;
<div class="mydiv test1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/1200px-Googlelogo.png" >
<span id="mySpan1"></span>
</div>
<div class="mydiv test2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/1200px-Googlelogo.png" >
<span id="mySpan2">100</span>
</div>
【讨论】:
以上是关于如果此 div 内的元素(跨度)为空,则不显示 div的主要内容,如果未能解决你的问题,请参考以下文章