当有多个相同父类的div时从子类中选择父类答案

【问题标题】：Selecting a parent class from a child class when there are multiple div's of same parent class当有多个相同父类的div时从子类中选择父类
【发布时间】：2017-10-04 11:54:24
【问题描述】：

有四个具有相同类的父 div，并且它们都有一个具有“child”类的子级。现在的问题是，假设我点击了第一个父 div 的子 div（第一个子），我想对它的父级产生一些影响，即只影响“第一个父级”。由于是相似的类，所有父 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。我可以给它们所有单独的类，然后为它们编写 onClick() 方法，但这不是一个合适的解决方案。

【问题讨论】：

使用您的示例中的代码，只有被点击元素的父元素会受到影响。 .parent('.parent') 将返回该类的第一个父级。看看documentation！
parent() 正在工作，最近的() 也是如此，但所有父 div 都具有相同的类，并且我正在将 onClick 添加到具有“child”类的子元素中。仍然无法实现所需的功能。
在 onClick 回调中this 指的是被点击的元素而不是所有的.child 元素，这意味着.parent(".parent") 将只返回被点击元素的父元素。
是的，你是对的，但还有一点需要注意的是每个子 div 都有 .child 类，所以这个 onClick() 将应用于每个子 div。
即使应用于多个元素，this 仍然会引用被点击的元素。 $(this) != $(".child"), $(this) == ClickedElement.

标签： javascript jquery html css

【解决方案1】：

你可以的

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

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

【讨论】：

它仍然会影响所有父 div。
@PraveenBisht 它不会影响所有父 div。这是jsfiddle链接jsfiddle.net/2ozjduda
感谢您的帮助！

【解决方案2】：

使用最近的('.class')

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

我更新了我的答案！

【讨论】：

我也试过了，但它仍然会影响所有父 div。
+1 到这个，因为它比其他 anser 更通用。以防万一“子” div 在某处成为父元素与其自身之间的另一个容器 div 的子元素

【解决方案3】：

您的回答是正确的，是一个很好的做法，我看不出这里有什么问题。

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

【讨论】：

感谢您的帮助！

【解决方案4】：

试试这个代码

$(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>

【讨论】：

感谢您的帮助！

【解决方案5】：

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

【讨论】：

【解决方案6】：

改变你的JS如下：

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

对我来说，单击 div 时，它会隐藏其父级。不是其他人。顺便说一句，你有一个“;”在 'none' 之后是无效的，因为这是一个对象，并且只接受不接受任何内容或逗号。

见https://jsfiddle.net/n66sdgdz/

【讨论】：

大声抱歉，但这不是问题所在。由于选定的类是“.child”，即每个孩子的类，所以所有父“.parent”div 都将在点击时生效。
点击 jsfiddle 你会看到它不会影响其他人。
感谢您的帮助！我的 CSS 可能有问题。

【解决方案7】：

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

首先，您的代码确实有效，您可以在此处看到：

Fiddle

但是，您的代码中有一个错误。这是; 末尾的'display':'none';

javascript 对象内不应有;。

【讨论】：

我只在这个问题中犯了这个错误，但感谢您的帮助，我可能在 CSS 中遇到了一些问题。

【解决方案8】：

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

或

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

https://jsfiddle.net/t9wxbLs8/

【讨论】：

@parveen Bisht 试试这个，希望对您有所帮助。
好的，我会再次检查我的代码。感谢您的帮助！
如果它帮助我需要一个支持来恢复我的提问能力，目前我无法提问。 :\
感谢您的帮助！