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

您需要将其绑定到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才能运行上述循环（如果您无法将其绑定到点击）：

$('.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 2

隐藏输入元素并将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>

Answer 3

在每个.confirm元素上循环，选择输入（通过处理父项）并将其隐藏

$('.confirm').each(function(){
     $(this).parent().find('input[type="submit"]').hide();
});

添加.confirm元素后，您需要调用此方法，最好在添加

后附加.confirm时调用hide

$('input[type="submit"]').on('submit',function(e){
   e.preventDefault();
   $(this).parent().append('<span class="confirm">Joined</span>');
   $(this).hide();
   //other code here
})

另一种选择是创建间隔并在特定时间调用函数

setInterval(function(){  $('.confirm').each(function(){
         $(this).parent().find('input[type="submit"]').hide();
 }); }, 30);

Answer 4

除了现有答案外，您还可以使用: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 5

这是所需的解决方案，此处使用@ssamuel代码。

  $(document).on('click', '.mailing-list', function () {
       $(this).find("input").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" value="1">
</div>

<div class="mailing-list">
   <input type="submit"  value="2">
</div>

<div class="mailing-list">
   <input type="submit"  value="3">
</div>

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

5 个答案: