Question

我试图获得儿童无线电输入。结果很奇怪。这是html：

 <div id=transactionTabs>
    <input type="radio" id="transtab1" name="transactionTabs" value="tab1"></input>
    <label for="transtab1" class="noTransactions">Tab 1 <span>0</span> </label>

    <input type="radio" id="transtab2" name="transactionTabs" value="tab2"></input>
    <label for="transtab2" class="noTransactions">Tab 2 <span>0</span> </label>

    <input type="radio" id="transtab3" name="transactionTabs" value="tab3" checked="checked"></input>
    <label for="transtab3" class="selected">Tab 3 <span>1</span> </label>

    <input type="radio" id="transtab4" name="transactionTabs" value="tab4"></input>
    <label for="transtab4" class="noTransactions">Tab 4 <span>0</span> </label>

和Jquery：

    var $element = $('#transactionTabs');

    console.log('1st child is ');
    console.log($element.find(':radio:nth-child(1)'));

    console.log('2nd child is ');
    console.log($element.find(':radio:nth-child(2)'));

    console.log('3rd child is ');
    console.log($element.find(':radio:nth-child(3)'));

    console.log('4th child is ');
    console.log($element.find(':radio:nth-child(4)'));

    console.log('5th child is ');
    console.log($element.find(':radio:nth-child(5)'));

奇怪的是，它只与奇数一起使用。没有找到第二个和第四个孩子。我希望第二个孩子是：“输入#transstab2”但是找到了nothng ......

Answer 1

您的JSFiddle是空的，但您的问题似乎是您正在使用:nth-child。 :nth-child选择器会拉出 n 子元素，无论其类型如何（意味着:radio:nth-child(2)为空，因为:nth-child(2)是label元素）。< / p>

相反，您想使用the :nth-of-type selector：

$element.find(':radio:nth-of-type(1)')

Answer 2

$('input[type=radio]:nth-child(1)')

试试这个

Answer 3

在此上下文中尝试使用:eq()和.filter()，

var $element = $('#transactionTabs :radio');

console.log('1st child is ');
console.log($element.filter(':eq(1)'));

console.log('2nd child is ');
console.log($element.filter(':eq(2)'));

.
.

Answer 4

使用 .eq() 选择器获取元素

 var element = $('#transactionTabs input[type=radio]'); 
 element.eq(0);

Jquery nth-child没有按预期工作

4 个答案: