Question

有四个父级div具有相同的类，并且所有这些div都有一个具有类'child'的子级。现在的问题是，假设我点击了第一个父div的子div（First Child），我想对它的父母产生一些影响，即'First Parent'只受影响。由于是类似的类'所有父母div将受影响。这是HTML

<div class="parent"> //First Parent
   <div class="child"></div> //First Child
</div>
<div class="parent">
   <div class="child"></div>
</div>
<div class="parent">
   <div class="child"></div>
</div>
<div class="parent">
   <div class="child"></div>
</div>

这是JQuery

$('.child').on('click',function(){
   $(this).parent('.parent').css({
      'display':'none';
   });
});

单击子元素将影响所有父div与类“parent”。要么我可以给它们所有单独的类，然后为所有这些类写入onClick（）方法，但这不是一个合适的解决方案。

Answer 1

你可以做到

$(this).parent().hide();

如果你想隐藏点击的div的父级

Answer 2

使用最近的（'。class'）

$('.child').click(function() {
   $(this).closest('.parent').css('display':'none');
});

我更新了我的答案！

Answer 3

$(document).ready(function() {
    $('.child').on('click',function(){
       $(this).closest('.parent').css('display','none');
    });
});

OR

$('.child').on('click',function(){
$(this).parent('.parent').eq(0).css('display','none');
});

https://jsfiddle.net/t9wxbLs8/

Answer 4

按照以下方式更改您的JS：

$('.child').on('click',function(){
   $(this).parent().css({
      'display':'none'
   });
});

对我而言，点击一个div，它隐藏了它的父级。不是其他人。顺便说一下，你有一个＆＃34 ;;＆＃34;之后＆＃39;没有＆＃39;这是无效的，因为这是一个对象，并且只接受任何内容或逗号。

请参阅https://jsfiddle.net/n66sdgdz/

Answer 5

你的答案是正确的，这是一个很好的做法，我不知道这里的问题是什么。

您可以$(this).parent('.parent').hide();进行唯一的更改，而不是使用jQuery css方法。

Answer 6

试试这段代码

$(document).ready(function() {
  $('.child').click(function() {
    $(this).parent().css('display', 'none');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">first</div>
</div>
<div class="parent">
  <div class="child">second</div>
</div>
<div class="parent">
  <div class="child">third</div>
</div>
<div class="parent">
  <div class="child">fourth</div>
</div>

Answer 7

$('.child').on('click',function(){
   $(this).closest('.parent').css({
      'display':'none'
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> //First Parent
   <div class="child">div 1</div> //First Child
</div>
<div class="parent">
   <div class="child">div 2</div>
</div>
<div class="parent">
   <div class="child">div 3</div>
</div>
<div class="parent">
   <div class="child">div 4</div>
</div>

Answer 8

好的，这里有很多答案，“尝试这个”或其他例子。

首先，您的代码实际上可以正常工作，如您所见：

Fiddle

但是，代码中有一个错误。这是;

末尾的'display':'none';

javascript对象中应该没有;。

当存在多个相同父类的div时，从子类中选择父类

8 个答案: