在 Jquery 中隐藏父 div答案

【问题标题】：Hiding parent divs in Jquery在 Jquery 中隐藏父 div
【发布时间】：2010-11-04 23:02:47
【问题描述】：

我有一个简单的 div 结构（见下文）。我要做的就是当点击 div id“interviewer-Button”时，应该出现以下 div，当点击 div id“elt”时，从 id“parent0”到最后的 div 应该隐藏。

显示部分工作正常。然而，当我试图隐藏时，它并没有隐藏。当我单击 div id“elt”时，会抛出警报消息“hh”（见下文）！诡异的。关于如何隐藏它的任何帮助？

<div id = "interviewer-Button">
   Interviewer
   <div id = "parent0">
         Viv
          <div id = "parent1">
                Parent
                <div id = "elt">
                     Close
                 </div>

          </div>                                        
    </div>                                                              
</div>    


<script>
$(document).ready(function() {
    $("#parent0").hide();   
    $("#interviewer-Button").click(function() { alert("hh");$("#parent0").show(); });
    $("#elt").click( function () {
            $(this).parent().parent().hide();
         });                
     });
</script>

【问题讨论】：

标签： jquery jquery-ui html

【解决方案1】：

您需要在内部元素的处理程序中停止传播点击事件。没有它，父级的处理程序也将被调用。请参阅jQuery event object 了解更多信息。

$("#elt").click( function (e) {
    e.stopPropagation();
    $(this).parent().parent().hide();
});

【讨论】：

【解决方案2】：

n/a使用上述的组合。感谢两位成员的回答。很大的帮助。

            jQuery(function ($) {
                $('.coffee-strength p span').each(function () {
                    var string = $.trim($(this).text());
                    if(string!="22"){
                        $(this).html('<img src="/images/' + string + '.png" alt="' + string + '" />');
                    }else{
                        $(this).parent().parent().hide();    
                    }
                    });

            });

            </script>

【讨论】：

【解决方案3】：

您还可以利用事件传播并仅附加一个事件：

$(function() {
  $("#parent0").hide(); 
  $("#interviewer-Button").on('click', function(e){
    $(this).find('#parent0').toggle(e.target.id !== 'elt');
  });
});

【讨论】：