如何使用 jQuery 获取第 n 个子元素的属性？

Question

我的 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');

但它返回未定义。

Answer 1

您选择了错误的子元素：

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

选择 li 的第 n 个子元素及其子元素 a。

这是一个 jsfiddle 演示：

http://jsfiddle.net/G5Cmn/

Answer 2

您应该注意这里的从零开始的索引。看一下我的代码示例，看看有什么不同。这两种选择都适合您，具体取决于您的需求。

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

});

Answer 3

看起来您将变量命名为 $myIndex 并且该代码引用了 myIndex。 JS 中的变量不需要 $ 前缀，因此当您使用 myIndex 时，它不会给出错误消息。 myIndex 是 undefined，因此您的选择器计算结果为 '#abc a:nth-child(undefined)'，这不是有效的选择器。

编辑

这里是一些示例代码

另一件需要注意的事情是，在 JS 数组中为零-based 但 CSS 中的内容（例如 nth-child 选择器）是基于 1 的，因此要获取第二个链接，您需要将 $myIndex 设置为 2，而不是 1。