Question

如何在以下示例中使用jQuery获取第N个元素类？我想删除元素selected的类zone两个级别。这就是为什么我使用next().next()，但它没有选择li的课程。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
            $(document).on("click", "#myId", function() {
                // $("#zone > .CaptionCont  > .optWrapper ul li").removeClass('selected');
                var op = $("#zone").next().next();
                console.log(op[0]);
            });
        </script>
    </head>
    <body>
        <div id="zone"></div>
        <p class="CaptionCont SelectBox search" title=" Volvo ">
            <span class=""> Volvo </span>
            <label><i></i></label>
            <input type="text" class="search-txt" value="" placeholder="Enter here.">
        </p>
        <div class="optWrapper multiple">
            <ul class="options">
                <li class="opt selected"><span><i></i></span>
                    <label>Volvo</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Saab</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Mercedes</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Audi</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>BMW</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Porche</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Ferrari</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Mitsubishi</label>
                </li>
            </ul>
        </div>
        <input type="submit" name="OK" id="myId" value="Ok" />
    </body>
</html>

Answer 1

使用

删除所选的课程

$('#zone').siblings('.optWrapper').find('.selected').removeCl‌ass('selected');

或

$('#zone').nextAll('.optWrapper').find('.selected').removeCl‌ass('selected');

（表现更好，因为它只会查找所选元素的下一个元素）

＆＃13;

$(function(){

  $('#zone').siblings('.optWrapper').find('.selected').removeClass("selected");
  
});

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
            $(document).on("click", "#myId", function() {
                // $("#zone > .CaptionCont  > .optWrapper ul li").removeClass('selected');
                var op = $("#zone").next().next();
                console.log(op[0]);
            });
        </script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="zone"></div>
        <p class="CaptionCont SelectBox search" title=" Volvo ">
            <span class=""> Volvo </span>
            <label><i></i></label>
            <input type="text" class="search-txt" value="" placeholder="Enter here.">
        </p>
        <div class="optWrapper multiple">
            <ul class="options">
                <li class="opt selected"><span><i></i></span>
                    <label>Volvo</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Saab</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Mercedes</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Audi</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>BMW</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Porche</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Ferrari</label>
                </li>
                <li class="opt"><span><i></i></span>
                    <label>Mitsubishi</label>
                </li>
            </ul>
        </div>
        <input type="submit" name="OK" id="myId" value="Ok" />
    </body>
</html>

＆＃13;

如何在jquery中获取div下面的第N个元素

1 个答案: