joe joe - 13 days ago 5
HTML Question

how to get the Nth element below div in jquery

How can I get the Nth element class using jQuery in the following example? I want to remove class

selected
of element
zone
two levels down. That's why I used
next().next()
but it's not getting class selected of
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

Remove the selected class using

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

or

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

(Better performing as it will only look for next elements of the selected element )

$(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>

Comments