1

特定のオブジェクトのカウントがDOMで変更されるたびに検出する方法を見つけようとしています。

たとえば、クラス '.special' が現在 5 つのオブジェクトを返すとします。

$('.special').css('color','1px solid red');

その後、ユーザーは.specialオブジェクトの数を増減させます。ですから、.specialオブジェクトの数が 5 から変化したらすぐに、イベントをトリガーしたいと思います。

これは可能ですか？

これにイベントを使用してみchangeましたが、このインスタンスでは機能しません。

よろしくお願いします！

4

5 に答える 5

1

DOMNodeInserted イベントをキャプチャできます。

document.addEventListener('DOMNodeInserted', function(e){
    alert($('.special').length);
});

問題は、このイベントが IE8 以前ではサポートされていないことです。

回避策を見つけることができるかもしれませんが、私は試していません。

動作する JSFiddle を次に示します。

于 2013-03-05T19:40:28.167 に答える
0

あなたの状況 (ユーザーが DOM 内の要素の数を増減できる 20 の異なる方法があります) では、私の頭に浮かぶことは 1 つだけです。special現在の要素を保存する必要があり、 a を使用してsetInterval、たとえば 2 秒ごとに関数を呼び出し、specialsカウントを確認して前の数値と比較することができます。それらが等しくない場合は、変更があります。そして、私はこの方法をclickお勧めしません。さまざまな方法でバインディングを行う方がよいと思います。

于 2013-03-05T19:15:27.507 に答える
0

この問題を解決する最も簡単な方法は、".special" オブジェクトを作成するプロキシ メソッドを作成することです。DOM の現在の要素数を制御するには、作成のイベントが必要です。たとえば、次のようになります。

function createNewSpecial() {
    var specialCnt = $('.special').length;
    if (specialCnt > 5) {
        // magic
    }

    // creation of another ".special" element in DOM if needed
}
于 2013-03-05T19:16:02.327 に答える
0

最善の解決策は、列の追加時に実行したい操作を実行する関数を定義することです。次に例を示します。

function on_add_column() {
  // do stuff
}

この関数を、列の追加を引き起こしているすべてのイベント ( clicks、ajaxs など) にバインドします。

$("button#add").on("click", on_add_column)
$("a#add-link").on("click", on_add_column)
$("input#beh").on("change", on_add_column)

タイムアウトを使用すると、設定された間隔で jQuery が DOM を照会することになります...これは効率的ではありません。また、独自のアプリケーション内に列を追加するすべてのアクションを知っておく必要があります。

于 2013-03-05T19:23:15.757 に答える
0

わかりました、これにはいくつかのコードが含まれますが、カスタム イベントが機能する可能性があります。ここでは、起動するカスタムの「specialEvent」と、目的を実行するための「trackChanges」関数があります。

ここで変更された内容に応じてクラスを追加するだけの「トラッカー」関数をフィドルで作成しました: http://jsfiddle.net/DsSQd/1/ そして以前に「トラッカー」要素で見られた長さを追跡します-これでグループの親の場合。少し醜いですが、そこでやりたいことができます。私の場合、親ラッパーでグループの長さを追跡し、長さが変更されたかどうかに応じてクラスを追加するだけです。変更されていない場合は、イベントを発生させる要素。

// custom event handler
$(document).on('specialEvent', '.special, .changerthing, .friendly>.specialalso', function () {
    trackChanges(this, $(this).parent(), $(this).parent());//react to the change
});
// event where I trigger the handler
$('#wrapperToBindTo').on('click wacked', '.changers,.special,.changerthing', function () {
    $(this).trigger('specialEvent');
});
// event where I trigger the handler
$('.friendly').on('click', '.specialalso', function () {
    var me = $(this);
    me.clone().appendTo($(this).parent()).text(me.text() + ' Copy of:' + me.index()); //add one
    me.parent().find('.specialalso:last').trigger('specialEvent'); //fire special event
});

たとえば、次の関数を追加できます。

//added to show a remove, then trigger that cascades
$('#wackFriendly').click(function(){
    $('.friendly>.specialalso').last().remove();
    $('.friendly>.specialalso').last().trigger('wacked');
});

次に、ここに示すように処理します: http://jsfiddle.net/DsSQd/2/

于 2013-03-07T16:37:55.267 に答える