Question

我尝试选择设置类的表的标题。单词：查找类.red的元素，并开始在此元素上方查找h3元素。

$('.xred').closest('table').addClass('test').prev('h3').addClass('test');

.test { background-color: green; }
.xred { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Goal</h3>
<table>
  <tr>
    <td>Blabla</td>
    <td class="xred">Red</td>
  </tr>
</table>

工作正常，只要我不在桌子和H3之间放任何东西。

如果其他元素介于两者之间，我怎样才能实现呢？

$('.xred').closest('table').addClass('test').prev('h3').addClass('test');

.test { background-color: green; }
.xred { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Goal</h3>
<div>The Problem DIV</div>
<table>
  <tr>
    <td>Blabla</td>
    <td class="xred">Red</td>
  </tr>
</table>

非常感谢！

Answer 1

我不完全确定为什么你会这么低效。你没有直接访问HTML吗？

如果你这样做，可能会更容易做到这样的事情吗？

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapperdiv>
  <h3>Goal</h3>
  <div>The Problem DIV</div>
  <table>
    <tr>
      <td>Blabla</td>
      <td class="xred">Red</td>
    </tr>
  </table>
</div>

脚本：

$('.xred').closest('table').parent().find("h3").addClass("test");

拥有一个包装器会让事情变得更容易，是吗？

然后，我个人永远不会建立任何我需要做这么多DOM搜索的东西。这种效率非常低。我建议使用包装器div的一个好的html结构，你可以将它存储在一个变量中：

var $wrapperDiv = $('.wrapperDiv');

$('h3', $wrapperDiv).addClass("test");

但是，那只是我......

但为什么？

好吧，每当你使用像prevAll和closest这样的函数时，你就会遍历整个DOM。它使得CPU使用率相当高，而且对手机等设备较慢的设备通常会出现滞后响应。它还可以更快地耗尽电池。

除此之外，当在功能顶部堆叠功能时，您会注意到任何设备上的延迟响应。

最佳做法是将任何静态包装器存储在变量中一次，这样您就不必经常遍历DOM。然后，使用尽可能少的选择器来获得你需要的东西，因为再次;每个选择函数将再次遍历DOM。它只是CPU密集型。

Answer 2

您需要使用.prevAll()选择前一个匹配的元素。 .prev()如果匹配参数，则选择上一个元素。

＆＃13;

$('.xred').closest('table').addClass('test').prevAll('h3').addClass('test');

＆＃13;

.test { background-color: green }
.xred { background-color: red }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Goal</h3>
<div>The Problem DIV</div>
<table>
  <tr>
    <td>Blabla</td>
    <td class="xred">Red</td>
  </tr>
</table>

＆＃13;

最靠近表格上方的H3

2 个答案: