使用jQuery将类添加到父div之外的此元素

Question

我正在尝试使用jQuery选择特定元素的父级，并向其添加类。例如：

$('.disable-link').click(function(e) {
  $(this).hide();
  $(this).parents('.item').find('.title').addClass('disabled');
  
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <div class="title">Thing 1</div>
</div>
<div>
  <a class="disable-link" href="#">Click to Disable Thing 1</a>
</div>
<div class="item">
  <div class="title">Thing 2</div>
</div>
<div>
  <a class="disable-link" href="#">Click to Disable Thing 2</a>
</div>
<div class="item">
  <div class="title">Thing 3</div>
</div>
<div>
  <a class="disable-link" href="#">Click to Disable Thing 3</a>
</div>

我原本以为使用.parents('.item')可以一直向上查找到指定的item类，并使用this定位到那个具体的元素，但是出现问题了。

我尝试使用parent().parent().find('.title')，但这会将disabled类添加到所有标题上，而不仅仅是一个。

我感觉这应该很简单，但我无法理解具体的继承关系。

- ultraloveninja

Answer 1

具有 class=".item" 的元素不是 ".disable-link" 元素的父元素，因此您应该先选择父级 "div"，然后使用 ".prev()" 方法获取前一个 ".item"，示例代码如下：

``` $('.disable-link').parent('div').prev('.item'); ```

$('.disable-link').click(function(e) {
    $(this).hide();
    $(this).parents('div').prev('.item').find('.title').addClass('disabled');

    e.preventDefault();
});

希望这能帮到您。

$('.disable-link').click(function(e) {
  e.preventDefault();
  
  $(this).hide();
  $(this).parents('div').prev('.item').find('.title').addClass('disabled');
});

.disabled{
   background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <div class="title">Thing 1</div>
</div>
<div>
  <a class="disable-link" href="#">Click to Disable Thing 1</a>
</div>
<div class="item">
  <div class="title">Thing 2</div>
</div>
<div>
  <a class="disable-link" href="#">Click to Disable Thing 2</a>
</div>
<div class="item">
  <div class="title">Thing 3</div>
</div>
<div>
  <a class="disable-link" href="#">Click to Disable Thing 3</a>
</div>

- Zakaria Acharki

---

啊，好的。那就说得通了。我知道我在某个地方漏掉了另一个步骤。谢谢！ - ultraloveninja