クラスのあるテーブルの上の最も近いH3

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

.prevAll()に一致する前の要素を選択する必要があります。 .prev()一致するパラメータがある場合、前の要素を選択します。

$('.xred').closest('table').addClass('test').prevAll('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 2

は、私はあなたがとても非効率的な何かをしたい理由はまったくわかりません。 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検索を行うために必要なものは一切構築しません。それはひどく非効率的です。

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

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

しかし、それは私だけです...

が、なぜ：私はあなたがそうのような変数に格納することができますラッパーのdivとの良好なHTML構造をお勧めしますか？

まあ、prevAllとclosestのような関数を使用すると、DOM全体をトラバースしています。かなりのCPU使用量と、携帯電話のような低速のデバイスではしばしば応答が遅くなることがあります。また、電池の消耗も早くなります。

さらに、関数の上に関数を積み重ねると、どのデバイスでも応答が遅くなることがわかります。

ベストプラクティスは、変数内に静的ラッパーを一度格納することです。そのため、DOMを常にトラバースする必要はありません。次に、できるだけ小さなセレクタを使用して、必要なものを取得します。すべての選択関数がDOMをもう一度トラバースします。それは単なるCPUの集中です。