[英]Hide parent div when it contains <textarea>?
我有一个由其内容动态生成的 div 结构。 它看起来像这样:
<div class="fpd-list-row fpd-add-layer" id="1609962837979"><div class="fpd-cell-0"><span></span></div><div class="fpd-cell-1">Dein Foto</div><div class="fpd-cell-2"><span class="fpd-icon-add"></span></div></div>
<div class="fpd-list-row" id="1609962838288"><div class="fpd-cell-0"><span class="fpd-current-color" style="background: #ffffff" data-colors=""></span></div><div class="fpd-cell-1"><textarea>Wanderlust</textarea></div><div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span></div></div>
我只想隐藏 textareas 和 parent 元素到 .fpd-list-row 但保持其他 div like.fpd-list-row.fpd-add-layer 不变。 当我将 textarea 设置为不显示时,父 div 仍然存在。 有没有办法仅在包含<textarea>
时将父 div 隐藏到 ..fpd-list-row ?
遍历所有 div,并使用.find()
检查与某个选择器匹配的父元素。
$(document).ready(function(){ var divs = $("div"); for(var i = 0; i < divs.length; i++){ var current = divs[i]; if($(current).find("textarea").length.= 0){ current.style;display='none'; } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="fpd-cell-1"><textarea>My Text</textarea></div> <div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div> <div class="fpd-cell-3"><textarea>My Text</textarea></div>
对于最简洁的解决方案(一个衬里),请使用:
$(document).ready(function(){ jQuery('textarea').parent().hide(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="fpd-cell-1"><textarea>My Text</textarea></div> <div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div> <div class="fpd-cell-3"><textarea>My Text</textarea></div>
检查父 div 的子元素:
divs = document.getElementsByTagName("DIV") for (var i = 0; i < divs.length; i++) { if (divs[i].childElementCount == 1 && divs[i].children[0].tagName.toLowerCase() == "textarea") { divs[i].style.display = "none"; } else { //for demonstration purposes divs[i].style.backgroundColor="red" } }
<div class="fpd-cell-1"><textarea>My Text</textarea></div> <div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span> </div> <div class="fpd-cell-3"><textarea>My Text</textarea></div>
或者,删除 textarea 的父级(Spectric 的创意):
textareas = document.getElementsByTagName("TEXTAREA") for (var i = 0; i < textareas.length; i++) { textareas[i].parentNode.style.display = "none" }
<div class="fpd-cell-1"><textarea>My Text</textarea></div> <div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span> </div> <div class="fpd-cell-3"><textarea>My Text</textarea></div>
第一个示例仅在其中有一个元素时才隐藏 div,它是 textarea,而第二个方法隐藏 textarea 的父级。 因此,第一个可以用于需要 textarea 的情况,而第二个在任何情况下都不会显示任何 textarea。
但是,您可以只使动态内容不生成 textarea 并在 css 中使用div:blank
伪 class。
- - - - - - - - 更新 - - - - - - - -
有问题的代码更新后更新。
textareas = document.getElementsByTagName("TEXTAREA") for (var i = 0; i < textareas.length; i++) { textareas[i].parentNode.parentNode.style.display = "none" }
<div class="fpd-list-row fpd-add-layer" id="1609962837979"> <div class="fpd-cell-0"><span></span></div> <div class="fpd-cell-1">Dein Foto</div> <div class="fpd-cell-2"><span class="fpd-icon-add"></span></div> </div> <div class="fpd-list-row" id="1609962838288"> <div class="fpd-cell-0"><span class="fpd-current-color" style="background: white" data-colors=""></span></div> <div class="fpd-cell-1"><textarea>Wanderlust</textarea></div> <div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.