CODEWITHSUNDEEP
jquery
Geo
Geo

Reputation: 3200

jquery nth-child select in a list with childern

I am trying to select an item from a nested list with jquery but I cannot do it so far

This is what I've tried so far

Jquery:

$(document).ready(function() {
    var $target= ("div>ul>li>ol>li:nth-child(4)");
    $target.fadeOut('fast');
});

And this is my html code:

  <div>
        <ul>
            <li>
                <ol>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li> <--- This is what I am trying to access
                </ol>
            </li>
            <li>something else</li>
            <li>something else</li>
        </ul>
    </div>

Upvotes: 2

Views: 1586

Answers (3)

Alec Hutomo
Alec Hutomo

Reputation: 43

I tried Jonathan's answer and it worked.

Instead I add ":nth-child(1)" before the first "li" to make target more precise (i guess).

$(document).ready(function() {
    var $target = $("div>ul>li:nth-child(1)>ol>li:nth-child(4)");
    $target.fadeOut('fast');
});

Upvotes: 1

j08691
j08691

Reputation: 207901

Try this instead of your $target.fadeOut('fast');:

$($target).fadeOut('fast');

You're trying to use a jQuery method on a non-jQuery object.

jsFiddle example

Upvotes: 1

Jonathan de M.
Jonathan de M.

Reputation: 9808

try this

$(document).ready(function() {
    var $target= $("div>ul>li>ol>li:nth-child(4)");
    // or var $target= $("div>ul>li>ol>li:last-child");
    $target.fadeOut('fast');
});

You forgot the $

http://jsbin.com/asazey/1/edit

Upvotes: 5

Related Questions