javascript - 帮助 nth-child()，选择所有 child

Question

我可能错过了一些完全愚蠢的事情，但我想不通。

我正在做一些简单的 jquery 练习，希望从 aside 元素中选择指定的子元素以获得宽度。但是，当我选择它时，返回值为 null .所以我尝试了一些东西，我将第 n 个子值切换为 2，并将方法切换为 html() 以查看是否可以做任何事情，是的，当我使用 nth-child(2) 时，它会选择 aside 元素中的所有子项.

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 元素及其子元素(放置在 <section> 元素中):

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

再次，无法弄清楚我做错了什么，它可以是 HTML5 元素吗？任何帮助将不胜感激。非常感谢

Answer 1

您正在申请 :nth-child()选择器到 <aside>元素，所以你的选择器最终匹配 <aside>元素是其父元素的第 n 个子元素。

您应该匹配 <article>元素代替:

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