希望有人可以帮忙解决这个问题:
我基本上想要的是当div introtext为空时,它必须隐藏div并将父div(grid-6)更改为class = grid-12。我似乎无法完成这项工作!这就是我所拥有的(samplecode):
HTML
<div class=header>
<img src="[[DTIMAGE]]" alt="inuit.css logo">
</div>
<h1 style="font-size:10px;">[[TITLE]]</h1>
<div class=grids>
<div class=grid-12>
[[FULLTEXT]]
</div><!-- /grid-6 -->
</div><!-- /grids -->
<hr>
<div class=grids>
<div class=grid-6>
[[FULLTEXT]]
</div><!-- /grid-6 -->
<div class=grid-6>
<div class="introtext"></div>
</div><!-- /grid-6 -->
</div><!-- /grids -->
<hr>
<div class=footer>
[[FOOTER]]
</div>
脚本 [使用jQuery 1.7.2 ]
$(document).ready(function(){
if ($(".introtext").text() === ""){
$(".introtext").hide();
}
});
提前致谢
答案 0 :(得分:0)
如果我理解正确,那么我建议:
$('.introtext').each(
function() {
if (!$(this).text()) {
$(this).hide().parent().toggleClass('grid-6 grid-12');
}
});
上述代码经过重新设计,以考虑到需求的变化,如OP的评论中所述:
我完全错了(为了让它工作太多了)事实上,如果div introtext为空,div grid-6([[FULLTEXT]]所在的位置)应该更改为div = grid- 12
$('.introtext').each(
function() {
if (!$(this).text()) {
$(this).hide().parent().prev().toggleClass('grid-6 grid-12');
}
});
重申上述内容:
$('.grid-6').filter(
function(){
var introtextEl = $(this).next('.grid-6').find('.introtext');
return introtextEl.length && !introtextEl.text()
}).toggleClass('grid-6 grid-12');
上面的代码(最新的代码块),有效地查看 all 选择器返回的元素,并根据两个条件对它们进行过滤,首先:如果有一个类的后续元素{具有类grid-6
的子元素的{1}}(jQuery选择器总是返回一个数组,因此introtext
检查),第二个:如果找到.length
元素没有文本内容
如果这些条件都为真,则返回当前评估的元素(以及条件为真的所有元素),以便.introtext
方法对其进行操作。
参考文献:
答案 1 :(得分:0)
您可以使用 :empty
选择器:
if ( $(".introtext").is(':empty') ){
$(".introtext").hide().parent().attr('class', 'grid-12')
}
如果您有多个introtext
类的元素,则可以使用each
方法:
$('.introtext').each(function(){
if ( $(this).is(':empty') ){
$(this).hide().parent().attr('class', 'grid-12')
}
})
$('.girds div').each(function(){
if ( $(this).text() == '[[FULLTEXT]]'){
$(this).attr('class', 'grid-12')
}
})