0

我有 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>
4

6 回答 6

3 
$('#btn').click(function(){
    $(".myRow").each(function(){
        var r = $(".This:first", this).val();
        alert(r);
    });
});
于 2013-02-18T16:56:03.273 回答
3 
$('.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');

工作示例

于 2013-02-18T16:56:04.223 回答
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});

小提琴

于 2013-02-18T16:56:21.790 回答
1

改成：

演示

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

你需要寻找.This相对于当前元素的，否则它总是会找到第一个实例。

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

于 2013-02-18T16:56:16.923 回答
0

您可以通过使用 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"]')
于 2013-02-18T17:03:35.870 回答
-2

这应该可以解决问题：

$('#btn').click(function(){
    $(".myRow input:nth-child(1)").each(function(){
        alert($(this).val());
    });
});
于 2013-02-18T16:56:48.187 回答