HTML:
<h3 style="display:none;" class="relItemhide ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">Related Items</a></h3>
<div style="display: none;" class="relItemhide ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<table width="100%">
<tbody>
<tr class="relItemdisplay"></tr>
<tr></tr>
</tbody>
</table>
</div>
如果.relItemdisplay
类文本不等于空白,我想将div
和h3
的CSS改成display : block ;
。
这是我目前尝试过的方法,但它不起作用
JavaScript/jQuery
$(document).ready(function () {
$(".relItemdisplay").each(function() {
if ($(this).text().trim() !== "") {
$(this).parent().closest('h3').css("display", "block");
}
});
});
最佳答案
与其尝试在 DOM 中导航,我建议您使用类:
$(document).ready(function () {
$(".relItemdisplay").each(function() {
if ($(this).text().trim() !== "") {
$('relItemhide').css("display", "block");
}
});
});
虽然我不确定您为什么要使用 .each()
,但我有一种有趣的感觉,您有多个这样的 block 。如果是这种情况,请告诉我,我会更新我的答案。如果不是,可以简化为:
$(document).ready(function () {
if ($(".relItemdisplay").text().trim() !== "") {
$('relItemhide').css("display", "block");
}
});
为多个 block 更新:
HTML:
<div class="relItem">
<h3 style="display:none;" class="relItemhide ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">Related Items</a></h3>
<div style="display: none;" class="relItemhide ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<table width="100%">
<tbody>
<tr class="relItemdisplay"></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<div class="relItem">
<h3 style="display:none;" class="relItemhide ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">Related Items</a></h3>
<div style="display: none;" class="relItemhide ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
<table width="100%">
<tbody>
<tr class="relItemdisplay"></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
Javascript/jQuery:
$(document).ready(function () {
$(".relItem .relItemdisplay").each(function() {
if ($(this).text().trim() !== "") {
$(this).parents('.relItem').find('.relItemhide').css("display", "block");
}
});
});
关于javascript - 如何使用 jquery 或 java 脚本访问父 div 和最接近该 div 的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26949471/