使用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')，它会一直沿着链向上延伸到带有this的特定item类，并针对该特定的类，但出于某种原因，它不是。

我尝试过使用parent().parent().find('.title')，但这最终会将disabled类添加到所有标题中，而不仅仅是其中的一个。我有一种感觉，它很简单，但我不能把我的头脑围绕在特定的继承上。

Answer 1

类.item的元素不是.disable-link元素的父元素，因此您应该首先针对父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>

​