javascript - divが空の場合は、それを削除して次のdivのクラスを変更します

Question

生成される出力には、次のようなものがあります。

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

div.fivecolが空の場合は、それを削除してdiv.sevencolをdiv.twelvecolに変更します。

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

トリックをしません。何か案は？

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、クラスで空の要素を見つけようとしますfivecol。+次に、クラスがであるを使用して、兄弟要素の取得に進み.sevencolます。

要素を取得したら.sevencol、そのクラス値をに変更しますtwelvecol。この関数を使用している.fivecol:emptyので、それが見つかったことがわかり、安全に削除できます。最後に、の代わりに割り当てられる新しいクラス値を返すだけですsevencol。

デモ： http： //jsfiddle.net/cLcVh/1/