如何在jQuery中获取div以下的第N个元素

debugcn 发表于 Dev

乔

在下面的示例中，如何使用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>

深的

使用以下方法删除所选的班级

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

或者

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

（执行效果更好，因为它只会查找所选元素的下一个元素）

$(function(){

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

<!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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。