使用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类添加到所有标题中，而不仅仅是一个。 我觉得这很简单，但是我无法围绕特定的继承问题。

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>