Question

我有2行，每行有2个文本输入。如何通过类“myRow”遍历每一行，并在每一行中获得第一个具有“This”类的子项？我可以获得第1行的第一个“This”类，但似乎无法获得第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>

Answer 1

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

Answer 2

$('.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

Answer 3

$('#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

Answer 4

更改为：

Demo

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

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

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

Answer 5

您可以使用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"]')

Answer 6

这应该可以解决问题：

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

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

6 个答案: