클래스가있는 테이블 위의 가장 가까운 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를 집중적으로 사용합니다.