如果当前元素具有某个 class，则将 class 添加到上一个元素

Question

我想定位一个 table，它在我想用作 'trigger' 的元素之外，然后再给它一个 class.

<div>
 <table class="table"></table>
</div>

<div></div>

<div class="trigger">
 <!---content open--->
</div>

class "trigger" 仅在 div 打开时出现，因此当它打开并添加 class 时，我想针对 table 就在它上面，只有 table。问题是 table class "table" 在页面上出现不止一次，并且两个元素之间总是有一个 div。我怎么会 select 只有那个 table 之前？

Answer 1

如果我没理解错的话，你想在你的 table 中添加一个 class，对吗？如果是这种情况，您可以向唯一要修改的 table 添加一个 id，然后使用 addClass.

<script>
    //perform condition checking
    $("#myTableID").addClass("class_to_add");
</script>
...
<div>
   <table id="myTableID"></table>
</div>

<div></div>

<div class="trigger">
  <!---content open--->
</div>

Answer 2

鉴于您的 HTML 结构，您尝试匹配的 table 是要触发的兄弟节点的子节点：

获取带有 prevAll() 的触发器的所有前面的兄弟，在其中搜索带有 find() 的 .table，并在结果匹配中保留最后一个。

var preceding = $('.trigger').prevAll().find('.table').last();
$(preceding).addClass('match'); // for demo, so you can see what matched

.match {
  color: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table class="table"><tr><td>Don't want this table</td></tr></table>
</div>
<div>
  <table class="table"><tr><td>Do want this table</td></tr></table>
</div>
<div>This sibling doesn't have a table</div>
<div class="trigger">This is the trigger</div>
<div class="table">Don't want this div</div>
<div>
  <table class="table"><tr><td>or this table</td></tr></table>
</div>

这非常脆弱。如果可能，请考虑使用特定的类名或 ID，而不是依赖于文档顺序。

如果当前元素具有某个 class，则将 class 添加到上一个元素

Add class to previous element if current element has a certain class

javascript

jquery

html

css

css-tables