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

好的，这确实涉及一些代码，但自定义事件可能会起作用。在这里，我有一个自定义的“specialEvent”可以触发，还有一个“trackChanges”函数可以做你想做的事。

我在小提琴中创建了一个“跟踪器”函数，它只是根据此处更改的内容添加一个类：http: //jsfiddle.net/DsSQd/1/ 并跟踪先前在“跟踪器”元素中看到的长度 - 在这个case 组的父级。这有点难看，但你可以在那里做你想做的事，在我的，我在父包装器中跟踪组的长度，并根据长度是否改变简单地添加一个类，如果没有，只需突出显示触发事件的元素。

// 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 回答
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

根据您的情况（用户可以通过 20 种不同的方式减少或增加 DOM 中元素的数量），我只想到了一件事。您应该存储当前special元素并可以使用 asetInterval并尝试例如每 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 回答