单击隐藏元素，而不是单击具有相同类的其他元素。

Question

如果“这个类”存在，我想隐藏一个元素，但是父类与其他元素共享同一个类。

基本上，HTML是：

<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

如果单击该按钮，它将向单击的元素添加以下内容：<span class="confirm">Joined</span>

我想知道的是，如果存在class="confirm"，只为单击的元素隐藏输入，而不是全部。

我试着：

$("#org-lists").each(function() {
   $(this).find(".mailing-list").each(function() {
     if($('.confirm').length) {
       $('#org-lists .mailing-list').find('input[type="submit"]').hide();
     }
   });
});

Answer 1

除了现有的答案之外，还可以使用:has https://api.jquery.com/has-selector/

$('.mailing-list:has(.confirm) input[type="submit"]').hide();

要修复原始代码，需要添加this以提供：

$("#org-lists").each(function() {
    // this = org-list
    $(this).find(".mailing-list").each(function() {
        // this = mailing-list
        // find if this mailing-list has a confirm (need >0 check)
        if ($(this).find('.confirm').length > 0) {
            // this still = mailing-list
            $(this).find('input[type="submit"]').hide();
        }
   });
});

Answer 2

您需要将其绑定到click事件：

​

$('.mailing-list > input').on('click', function() {
  var $input = $(this),
    $parent = $input.parent();  // this is the mailing list
    
  $parent.append('<span class="confirm">Joined</span>'); // add joined span
  $input.hide(); // hide input
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

​

如果要在循环中独立于click事件执行此操作，则可以使用筛选器：

​

$('.mailing-list').filter(function() {
  return $(this).children('.confirm').length;  // filter any mailing lists with a child of confirm
})
.children('input')  // get the inputs of the filtered
.hide();            // hide them

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailing-list">
  <input type="submit">
  <span class="confirm">Joined</span>
</div>

<div class="mailing-list">
  <input type="submit">
</div>

<div class="mailing-list">
  <input type="submit">
</div>

​

听起来，如果无法将DOM绑定到单击，则需要观察DOM以运行上述循环：

​

$('.mailing-list > input').on('click', function() {  
  $(this).parent().append('<span class="confirm">Joined</span>'); // add joined span - this is other code not important
});

// Select the node that will be observed for mutations
var targetNodes = document.querySelectorAll('.mailing-list');

// Options for the observer (which mutations to observe)
var config = { attributes: false, childList: true, subtree: false };

// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {   
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
          $('.mailing-list').filter(function() {
  return $(this).children('.confirm').length;  // filter any mailing lists with a child of confirm
})
.children('input')  // get the inputs of the filtered
.hide();            // hide them
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// watch the mailing list divs
for (i = 0; i < targetNodes.length; i++) {
  observer.observe(targetNodes[i], config);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

​

Answer 3

隐藏输入元素并将span标记追加到其父类

​

$('input').click(function(){
  $(this).hide();
  $(this).parent().append('<span class="confirm">Joined</span>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

<div class="mailing-list">
   <input type="submit">
</div>

​