>웹 프론트엔드 >JS 튜토리얼 >JQuery의 이전 + 다음 선택기

JQuery의 이전 + 다음 선택기

巴扎黑
巴扎黑원래의
2017-06-22 10:17:493867검색


1 소개

prev + next 선택자는 prev 요소 바로 뒤의 모든 다음 요소를 일치시키는 데 사용됩니다. 그 중 prev와 next는 동일한 레벨의 두 요소입니다.

prev + next 선택기는 다음과 같이 사용됩니다.

$("prev + next")

prev는 유효한 선택기를 나타냅니다.

next는 prev 선택자 바로 뒤에 오는 유효한 선택자입니다.

예를 들어, e388a4556c0f65e1904146cc1a846bee 태그 다음에 a1f02c36ba31691bcfe87b2722de723b 태그를 일치시키려면 다음 jQuery코드를 사용할 수 있습니다.

$("p + img"); 17bc257102169cbee8e20a03c884d3e6 태그를 추가하고 일치하는 요소의 배경색을 연한 파란색으로 변경합니다.

코드 3개

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<style type="text/css">
	.background{background:#cef}
	body{font-size:12px;}
</style>
<p>
    <label>第一个label</label>
    <p>第一个p</p>
    <fieldset>
        <label>第二个label</label>
        <p>第二个p</p>
    </fieldset>
</p>
<p>p外面的p</p>
<script type="text/javascript" charset="GBK">
      $(document).ready(function() {
            $("label+p").addClass("background"); //为匹配的元素添加CSS类
});
</script

실행 결과 4개

5 작동 지침

"첫 번째 p" 및 "두 번째 p" 단락에는 배경이 추가된 반면, "p 외부 p"는 레이블 요소의 형제 요소가 아니기 때문에 배경이 추가되지 않은 것을 확인하세요.

위 내용은 JQuery의 이전 + 다음 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.