Question

我有一个div，每次我做一个特定的动作时都会添加一个兄弟类。我希望一旦兄弟班改变就能找到。

例如，

  <div class="form-item">
          <div class="mck-radio"> <div id="#this1">Click Element 1 </div></div>
          <div class="mck-radio checked"> <div id="#this1">Click Element 2 </div></div>
    </div>

我需要找出哪个mck-radio有checked的兄弟类。

我想，如果在mck-radio的这两个div中更改了检查，我可以轻松地检索children元素。但以下不起作用。这就是我做的： -

$(".form-item .mck-radio").change(function() {
        console.log("sad");
});

Answer 1

您可以使用DOMSubtreeModified事件来跟踪class更改。请注意，您的ID [{1}}在您的示例中并不是唯一的。所以你的HTML无效......

＆＃13;

#this1

＆＃13;

$(".form-item .mck-radio").on("DOMSubtreeModified", function() {
    if( $(this).hasClass("checked") ) {
       console.log("I'm checked now!");
    }
});

$("button").click(function() {
    $(".form-item .mck-radio:eq(1)").addClass("checked");
});

＆＃13;

或<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-item"> <div class="mck-radio"> <div id="#this1">Click Element 1</div> </div> <div class="mck-radio"> <div id="#this3">Click Element 2</div> </div> </div> <button>add class</button>的新版本：

＆＃13;

observers

＆＃13;

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var elements = document.querySelectorAll(".form-item .mck-radio");

// observer
var observer = new MutationObserver(function(mutations) {
    // loop changes
    mutations.forEach(function(mutation) {
        // only look for class changes
        if( mutation.type == "attributes" && mutation.attributeName == "class" ) {
            // do your check
            if( $(mutation.target).hasClass("checked") ) {
                console.log("I'm checked now!");
            }
        }
    }); 
});

// add observers
for( var i = 0; i < elements.length; i++ ) {
    observer.observe(elements[i], { attributes: true });
}

// demo
$("button").click(function() {
    $(".form-item .mck-radio:eq(1)").addClass("checked");
});

＆＃13;

Answer 2

您可以使用bind()和＆＃34; DOMNodeInserted DOMNodeRemoved＆＃39;＆＃34;

$(".form-item .mck-radio").bind("DOMNodeInserted DOMNodeRemoved'",function(){
  console.log("sad");
});

通过JQuery检测兄弟类是否在Div中发生变化

2 个答案: