如何使用jQuery获取元素中的所有输入?

时间:2013-12-09 16:15:38

标签: javascript jquery html

我是jQuery的新手。我试图将所有输入都放在div元素中。这是我到目前为止编码的内容:

$(".pros_earnings_delete_annual_earning").click(function(e) {
    e.preventDefault();
    var target = $(e.target);
    var parent = target.parent(".total-for-earnings");
    var inputs = parent.children(":input");
    console.log(inputs);
    $.each(inputs, function(index, value) {
        console.log(value);
    });
});

当我点击时,我得到了这个:

[prevObject: v.fn.v.init[0], context: button.pros_earnings_delete_annual_earning, selector: ".parent(.total-for-earnings).children(:input)", constructor: function, init: function…]

每种方法似乎都没有输出任何内容。

HTML:

<div class="total-for-earnings" style='background-color:#ccc;padding:10px;overflow:hidden;'>
    <div style='width:160px;float:left;'><strong>Total for 2013:</strong> 
        <input type='hidden' name='pros_earnings_annual_year[]' value='2013'>
    </div>
    <input type='text' name='pros_earnings_annual_amount_mul[]' placeholder='0' value='10' size='8' style='width:80px;' />
    <select name='pros_earnings_annual_amount_sup[]' style='width:110px;'>
        <option value='Thousand'>Thousand</option>
        <option value='Million' selected>Million</option>
        <option value='Billion'>Billion</option>
    </select><span>USD</span>
    <div style="float:right;">
        <button class="pros_earnings_save_annual_earning" style="margin-left:15px; width:auto; height:25px;">Save</button>
        <button class="pros_earnings_delete_annual_earning" style="margin-left:15px; width:25px; height:25px;">-</button>
    </div>
</div>

3 个答案:

答案 0 :(得分:1)

简单地说:

var $inputs = $(':input',parent)

将匹配父元素上下文中的所有输入。

console.log正在输出代表此集合中每个项目的jQuery对象,如果您想要输入的值,请询问:

$inputs.each(function(){
    console.log($(this).val());
})

此外,还有另一个错误 - target.parent(..)应该是target.parents(..)(复数)

实例:http://jsfiddle.net/3aJuZ/

答案 1 :(得分:1)

更改

var target = $(e.target);
var parent = target.parent(".total-for-earnings");
var inputs = parent.children(":input");  

要,

var parent = $(this).closest(".total-for-earnings");
var inputs = parent.find(":input");  //Unlike children(), find() will go any depth to match.

答案 2 :(得分:0)

问题出在这一行

var parent = target.parent(".total-for-earnings");

更改为

var parent = target.parents(".total-for-earnings");