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

Question

我可能错过了一些完全愚蠢的事情，但我无法弄清楚。

我正在研究一些简单的 jquery 实践，并希望从旁边的元素中选择指定的子元素来获取宽度。然而，当我选择它时，返回值为 null 。所以我尝试了一些东西，我将 nth child 值切换为 2 并将方法切换为 html() 以查看是否会执行任何操作，是的，事实上，当我使用 nth-child(2) 时，它会选择 side 元素中的所有子级.

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();