javascript - If div is empty, remove it and change class of next div

Question

Some generated output can be as follows:

<div class="fivecol"></div>
<div class="sevencol">content</div>

if the div.fivecol is empty, I want to remove it and change the div.sevencol to a div.twelvecol

$('.fivecol').each(function() {
    if ($(this).html() ==''){
       $(this).remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
    }
});

doesn't do the trick. Any ideas?

Answer 1

$('.fivecol:empty + .sevencol').toggleClass('sevencol twelvecol')
                               .prev()
                               .remove();

演示：http: //jsfiddle.net/JY9NN/

Answer 2

$('.fivecol').each(function(i, div) {
    if (!div.html().trim()) {
       div.remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
    }
});

基本上我只是修复了一些语法错误，并将this引用更改为正确的参数调用。让我知道它是如何工作的。

最好的，

-布赖恩

Answer 3

尝试这个，

$(function () {
    $('.fivecol').each(function() {
    if ($(this).html() =='') {
       $(this).remove();
       $('.sevencol').each(function(){
         $(this).attr('class','twelvecol');
       });
    }
    });
});

Answer 4

我们可以使用一些花哨的选择器技巧：

$(".fivecol:empty + .sevencol").attr("class", function(){
    return $(this).prev().remove(), "twelvecol";
});

您可能会猜到，.fivecol:empty尝试使用 class 查找空元素fivecol。+然后它继续使用具有类的同级元素.sevencol。

一旦我们有了我们的.sevencol元素，我们就着手将它的类值更改为twelvecol. 由于我们在这个函数中，我们知道它.fivecol:empty被找到了，所以我们可以安全地删除它。最后，我们只需返回要分配的新类值来代替sevencol.

演示：http: //jsfiddle.net/cLcVh/1/