定位元素答案

【问题标题】：Targeting an element定位元素
【发布时间】：2017-09-08 22:19:33
【问题描述】：

点击时，我想定位单个父母的父母的兄弟姐妹的孩子。会有多个容器。因此，当单击删除时，我希望只更改该 div 中的 img。

这是我目前拥有的 jquery - 不幸的是我错过了一个额外的父母吗？

$('.removal').click(function() {
  $('this').parent().siblings('.item-img').find('.productImage').addClass('cart-removal-item-img')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item-img">
    <img class="productImg" src... />
  </div>

  <div class="rndm1">
  </div>

  <div class="rndm1">
  </div>

  <div class="item-action">
    <div class="rndm1"></div>
    <p><a class="removal" href="">remove</a></p>
  </div>

</div>

【问题讨论】：

$(this)，去掉''
另外，.item-img 不是 .removal 的父级的兄弟

标签： jquery css targeting

【解决方案1】：

当我修正两个错别字（“this”周围的引号和拼写错误的图像类）时，我可以让这段代码正常工作

$('.removal').on("click",function(e) {
  e.preventDefault(); // cancel the click
  $(this).closest(".container") // the container div
    .find('.productImg') // the image class in question
    .addClass('cart-removal-item-img');
});

.cart-removal-item-img { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item-img">
    <img class="productImg" src="http://lorempixel.com/400/200/sports/" />
  </div>

  <div class="rndm1">
  </div>

  <div class="rndm1">
  </div>

  <div class="item-action">
    <div class="rndm1"></div>
    <p><a class="removal" href="">remove</a></p>
  </div>

</div>

【讨论】：

【解决方案2】：

我确实回答了我自己的问题，添加了一个额外的 .parent()

<script>
 $('.removal').click(function(){
        $(this).parent().parent().siblings('.item-img').find('.productImage').addClass('cart-removal-item-img')
    });
</script>

【讨论】：

仅供参考，.closest('.removal') 比链接parent() 更好。当您单击 <a> 元素时，您可能还应该在其中添加一个 preventDefault() 调用
@RoryMcCrossan -最接近（“.container”）甚至更好;）
同意@RoryMcCrossan——这种 DOM 遍历非常脆弱，如果你以看似无害的方式修改 DOM（比如添加 <p> 标签），它就会中断。通过类名或 id 来定位元素比通过在树上上下跟踪路径要好得多......