jquery에서 클릭한 요소의 인접한 요소를 숨기는 방법-프런트엔드 Q&A-php.cn

jquery에서 클릭한 요소의 인접한 요소를 숨기는 방법

青灯夜游

풀어 주다： 2022-03-25 18:05:01

원래의

1778명이 탐색했습니다.

방법: 1. click()을 사용하여 클릭 이벤트를 요소에 바인딩하고 처리 기능을 설정합니다. 2. 처리 함수에서 next() 및 prev() 함수를 사용하여 인접 요소를 가져오고 hide( ) 인접한 요소를 얻으려면 요소가 숨겨져 있으며 구문은 "element.next().hide(); element.prev().hide()"입니다.

jquery에서 클릭한 요소의 인접한 요소를 숨기는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

jquery는 요소를 클릭하고 인접한 요소를 숨기는 기능을 구현합니다.

구현 방법:

click() 함수를 사용하여 클릭 이벤트를 지정된 요소에 바인딩하고 처리 기능을 설정합니다.
처리 함수에서 next() 및 prev() 함수를 사용하여 인접한 요소를 얻고 hide() 함수를 사용하여 얻은 요소를 숨깁니다.
- next(): 다음 형제 요소를 얻는 데 사용됩니다.
- prev(): 이전 형제 요소를 가져오는 데 사용됩니다.

구현 코드:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-1.10.2.min.js"></script>
        <style>
            .siblings * {
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
        </style>
        <script>
            $(document).ready(function() {
                $("li.start").css({
                    "color": "red",
                    "border": "2px solid red"
                });
                $("li.start").click(function() {
                    $("li.start").next().hide();
                    $("li.start").prev().hide();
                });
            });
        </script>
    </head>
    <body>
 
        <div style="width:500px;" class="siblings">
            <ul>ul (父节点)
                <li>li </li>
                <li>li (类名为"star"的相邻元素)</li>
                <li class="start">类名称为“star”的li元素</li>
                <li>li (类名为"star"的相邻元素)</li>
                <li>li </li>
            </ul>
        </div>
        <p>点击类名称为“star”的li元素，隐藏其相邻的两个元素</p>
    </body>
</html>