jQuery로 형제 요소를 얻는 방법은 무엇입니까? (코드 예)-JS 튜토리얼-php.cn

jQuery로 형제 요소를 얻는 방법은 무엇입니까? (코드 예)

不言

풀어 주다： 2019-01-18 10:50:53

앞으로

2228명이 탐색했습니다.

이 기사의 내용은 jQuery가 형제 요소를 얻는 방법에 관한 것입니다. (코드 샘플)에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 참조할 수 있기를 바랍니다.

① $(this).next(); 얻는 것은 현재 요소의 다음 형제 요소입니다

②$(this).nextAll(); 얻는 것은 현재 요소 다음의 모든 형제 요소입니다

3 $(this).prev(); 현재 요소의 이전 형제 요소를 얻습니다

4$(this).prevAll(); 현재 요소 앞에 있는 모든 형제 요소를 얻습니다

⑤$(this) .siblings(); 얻은 것은 현재 요소의 모든 형제 요소입니다(자체 제외)

사례 연습:

요구 사항 분석: 마우스가 텍스트를 입력하면 현재 텍스트의 배경이 바뀐다 빨간색을 클릭하면 현재 텍스트 앞의 텍스트 배경색이 노란색으로 변경되고, 마우스를 밖으로 이동하면 모든 배경색이

효과를 취소합니다.

코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            margin: 100px auto;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
//         $(function () {
//             //获取ul->li
//             $("ul>li").mouseenter(function () {
//                 $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
//             }).mouseleave(function () {
//                 $(this).css("backgroundColor","").siblings().css("backgroundColor","");
//             }).click(function () {
//                 //当前元素前面的所有兄弟元素背景颜色为黄色
//                 //$(this).prevAll().css("backgroundColor","yellow");
//                 //当前元素后面的所有兄弟元素背景颜色为蓝色
//                 //$(this).nextAll().css("backgroundColor","blue");
// 
//                 //链式编程代码
//                 //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
//                 //解决断链--->恢复到断链之前的一个效果--修复断链
//                 //.end()方法恢复到断链之前的效果
//                 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
//             });
//         });

            $(function(){
                //链式编程  鼠标进入--鼠标点击--鼠标移出
                //$("ul>li").mouseover().click().mouseout();
                $("ul>li").mouseover(function(){
                    $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
                }).click(function(){
                    $(this).prevAll().css("backgroundColor","yellow");
                    $(this).nextAll().css("backgroundColor","blue");
                }).mouseout(function(){
                    $("ul>li").css("backgroundColor","");
                });
            });
    </script>
</head>
<body>
<ul>
    <li>青岛啤酒（TsingTao）</li>
    <li>瓦伦丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奥丁格教士（Franziskaner）</li>
    <li>科罗娜喜力柏龙（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>罗斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>爱士堡（Eichbaum）</li>
    <li>哈尔滨牌蓝带</li>
</ul>

</body>
</html>

로그인 후 복사

참고: 위 코드의 49행과 50행을 한 행으로 압축할 수 있으며, 이는 새로운 메소드를 도입합니다

end(); 짧은 사슬.

원본 두 줄의 코드:

$(this).prevAll().css("backgroundColor","yellow");
$(this).nextAll().css("backgroundColor","blue");

로그인 후 복사

수정된 코드:

 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

로그인 후 복사

위 내용은 jQuery로 형제 요소를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!