帮助nth-child（），选择所有子项

Question

I might have missed something completely stupid, but I can't figure this out.

I am working on some simple jquery practice and was looking to select the specified children from an aside element to get the width. However, when I would select it, the return value was null . So I tried a few things, and I switch nth child value to 2 and the method to html() to see if that would do anything and yes infact, when I use nth-child(2) it selects all children in the aside element.

Javascript:

var modOneWidth = $('aside:nth-child(1)').width();
console.log(modOneWidth); //returns null

var modOneWidth = $('aside:nth-child(2)').html();
console.log(modOneWidth); //returns html of all children in aside

Aside Element and it's children (which are placed in a <section> element):

        <aside>
            <article>
                <h2>Module 1</h2>
                <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </article>
            <article>
                <h2>Module 2</h2>
                <p>riosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
            </article>
            <article>
                <h2>Module 3</h2>
                <p>ipsum dolor sit arud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
            </article>
        </aside>

Again, can't figure out what I'm doing wrong, can it be HTML5 elements? Any help would be greatly appreciated. Thanks a lot

Answer 1

You're applying the :nth-child() selector to the <aside> elements, so your selector ends up matching the <aside> element which is the nth child of its parent.

You should match the <article> elements instead:

var modOneWidth = $("aside article:nth-child(1)").width();

Answer 2

尝试

$('aside').children('article:eq(0)').html();