Question

我可能错过了一些完全愚蠢的东西，但我无法弄清楚这一点。

我正在进行一些简单的jquery练习，并且希望从旁边元素中选择指定的子节点来获取宽度。但是，当我选择它时，返回值为null。所以我尝试了一些东西，然后我将第n个子值转换为2，并将方法转换为html（）以查看是否会执行任何操作，是的，当我使用nth-child（2）时，它会选择旁边元素中的所有子元素

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

Answer 2

尝试

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

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

2 个答案: