Помогите с nth-child (), выбрав всех детей

Question

Я мог пропустить что-то совершенно глупое, но я не могу понять это.

Я работаю над некоторой простой практикой jquery и искал, чтобы выбрать указанных потомков из дополнительного элемента для получения ширины. Однако, когда я выбрал бы его, возвращаемое значение было 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

Элемент В стороне и его дочерние элементы (помещенные в элемент <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();