如何获得这些行中的每一行的第一个孩子？

问题描述：

我有2行，每行有2个文本输入。我如何通过每一行带有“myRow”类的行，并在每行内获得第一个具有“This”类的孩子？我能拿到第一 “这个” 类第1行的，但似乎无法得到第2行。如何获得这些行中的每一行的第一个孩子？

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<script src="http://code.jquery.com/jquery-1.8.1.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

$('#btn').click(function(){ 
    $(".myRow").each(function(){ 
     var r = $(".This").eq(0).val(); 
     alert(r); 
    }); 
}); 

}); 
</script> 

</head> 


<body> 

<div class="myRow"> 
    <input type="text" class="notThis" value="wrong!"/> 
    <input type="text" class="This" value="first one!"/> 
    <input type="text" class="This" value="almost!"/> 
</div> 

<br> 
<br> 

<div class="myRow"> 
    <input type="text" class="notThis" value="wrong!"/> 
    <input type="text" class="This" value="second one"/> 
    <input type="text" class="This" value="almost!"/> 
</div> 


<button id="btn">Submit</button> 
</body> 
</html>

答

$('#btn').click(function(){ 
    $(".myRow").each(function(){ 
     var r = $(".This:first", this).val(); 
     alert(r); 
    }); 
});

根据各种jsPerf测试，例如：http://jsperf.com/jquery-find-vs-context-2找到比背景更快。 – 2013-02-18 17:01:05

答

$('.This:eq(0)','.myRow').css('background-color','#F00'); 

$('.myRow').find('.This:eq(0)').css('border-color','#F00'); 

$('.This:first','.myRow').css('color','#0F0'); 

$('.myRow').find('.This:first').css('font-weight','bold');

Working example

答

更改为：

Demo

var r = $(this).find(".This").eq(0).val();

您需要查找相对于当前元素的.This，否则将始终查找第一个实例。

附注：作为.eq(0)的替代品，您可以使用.first()。

答

$('#btn').click(function(){ 
    $(".myRow").each(function(){ 
     var r = $(".This", this).eq(0).val(); 
     alert(r); 
    }); 
});

要选择同时获得，你总是可以做：

var elems = $('.This:eq(0)', '.myRow');

然后，你可以做到这一点，以获得值的数组：

var values = $.map($('.This:eq(0)', '.myRow'), function(el) {return el.value});

FIDDLE

是啊！设置上下文。 – 2013-02-18 16:56:49

IMO，上下文参数是jQuery不那么直观的功能之一。使用'.find（）'提供更清晰的代码。 – 2013-02-18 17:10:48

国际海事组织，一旦你习惯了它，情况就很好！ – adeneo 2013-02-18 17:13:20

答

这应该是诀窍：

$('#btn').click(function(){ 
    $(".myRow input:nth-child(1)").each(function(){ 
     alert($(this).val()); 
    }); 
});

答

您可以通过使用jQuery的工厂方法来搜索某个属性来获取JavaScript对象数组。例如：

var search = $('input[class="This"]');

您可以访问只需使用找到的第一个：

search[0];

本质（这是不是这样做的最优化的方式），你可以这样做：

var rows = $('.myRow'); 
for(var i = 0; i < rows.length; i++) { 
    var first; 
    var row = $(rows[i]); 
    var children = row.find('input[class="This"]'); 
    // You can also do row.find('input.This'); 

    if(children.length > 0) { 
     first = children[0]; 

     // Do something with it 
    } 
}

就像我说过的，不是最优化的方式，但是每次使用工厂方法时，都会得到一组对象，并且可以遍历它们。

您可以通过上述HTML属性进行搜索。

例子：

$('input[type="button"]') 
$('input[name="firstName"]') 
$('a[href="www.google.com"]')

如何获得这些行中的每一行的第一个孩子？

相关推荐