如何使用jQuery获取第n个孩子的属性?

时间:2011-06-16 18:53:06

标签: jquery jquery-selectors element

我的html代码如下:

<ul id="abc">
<li><a href="http://koolfinance.blogspot.com/2011/06/laxmi-bank.html">Laxmi Bank</a></li>
<li><a href="http://koolfinance.blogspot.com/2011/06/nepal-development-bank.html">Nepal 

Development Bank</a></li>
<li><a href="http://koolfinance.blogspot.com/2011/06/clean-energy-development-

bank.html">Clean Energy Development Bank</a></li>
<li><a href="http://koolfinance.blogspot.com/2011/06/gorkha-development-bank.html">Gorkha 

Development Bank</a></li>
<li><a href="http://koolfinance.blogspot.com/2011/06/bank-of-kathmandu.html">Bank of 

Kathmandu</a></li>
<li><a href="http://koolfinance.blogspot.com/2011/06/nic-bank.html">NIC Bank</a></li>
<li><a href="http://koolfinance.blogspot.com/2011/06/bank-of-asia-nepal-limited.html">Bank 

of Asia Nepal Limited</a></li>
<li><a href="http://koolfinance.blogspot.com/2011/06/nepal-sbi-bank-ltd.html">Nepal SBI 

Bank Ltd.</a></li>

</ul>

我需要找到href值或特定索引的标记目标页面。例如:如果索引为1,则应返回:http://koolfinance.blogspot.com/2011/06/nepal-development-bank.html 我试过了:

$targetLink = $('#abc a:nth-child(' + myIndex + ')').attr('href');

但返回未定义。

3 个答案:

答案 0 :(得分:1)

你应该知道这里从零开始的索引。看看我的代码示例,看看它们之间的区别。根据您的需要,这两个选项都可以为您服务。

var i = 1;
$(document).ready(function() {
    alert($('#abc li:nth-child('+i+') a').attr('href'));
    alert($('#abc a').eq(i).attr('href'));

});

答案 1 :(得分:1)

您选择了错误的子元素:

var targetLink = $('#abc li:nth-child(' + myIndex + ') a').attr('href');

选择li的第n个孩子及其中的孩子。

这是演示的jsfiddle:

http://jsfiddle.net/G5Cmn/

答案 2 :(得分:0)

您似乎将var命名为$myIndex,该代码引用了myIndex。 JS中的变量不需要$前缀,因此当您使用myIndex时,它不会向您提供错误消息。 myIndexundefined,因此您的选择器正在评估'#abc a:nth-child(undefined)',这不是有效的选择器。

修改

Here is some example code

另外需要注意的是,JS数组中的基于零的,但CSS中的内容(如nth-child选择器)是基于一的,因此要获得第二个链接,需要将$myIndex设置为2,不是1.