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

我可能错过了一些完全愚蠢的事情，但我无法弄清楚这一点。帮助nth-child（），选择所有的孩子

我正在做一些简单的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元素？任何帮助将不胜感激。非常感谢

来源

2011-09-24 kdub

有没有，你是不是向我们展示了另一种''

我注意到你的第二个变量名为'modOneWidth'，但是你抓住了'.html （）'。这是故意的吗？ **编辑：我是一个白痴：不理我。** –

@NimChimpsky：它是基于一个。 – BoltClock

您正在将:nth-child()选择器应用于<aside>元素，因此您的选择器最终会匹配其父元素的第n个子元素<aside>。

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

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

来源

2011-09-24 16:45:41

......我的愚蠢的错误。非常感谢 – kdub

尝试

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

来源

2011-09-24 16:47:15

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

回答

相关问题