javascript - 如何使用 find()、text()、val() 同时(连续)从 div 和 input 中查找值

Question

已解决 - 各种方法，谢谢大家，我又学到了

HTML

<div class="container">

  <div class="row">
    <div class="c1">value1</div>
    <div class="c2">value2</div>
    <div class="c3><input type="number" value="3" class="i1" /></div>
  </div>

  <div class="row">
    <div class="c1">value3</div>
    <div class="c2">value4</div>
    <div class="c3><input type="number" value="1" class="i1" /></div>
  </div>

</div>

我使用此代码提取值(此 here 的略微修改版本)

var fields = [ 'c1', 'c2','i1'];

var data = [];

$('.container .row').each(function(i, tr) {
    var row = {};
    for (var f = 0; f < fields.length; ++f) {
        row[fields[f]] = $(tr).find('.' + fields[f]).text()
    }
    data.push(row);
    console.log(data);
});

这很完美，但不适用于所有数据

c1 = value1

c2 = value2

i1 =

---

c1 = value3

c2 = value4

i1 =

由于 i1 是一个输入，text() 将不起作用 我需要 val()，我想知道我如何才能获取 i1 的值并将其添加到 row[fields[f]] 因此最终输出为:

(row 1) c1 = value1

c2 = value2

i1 = 3

---

(row 2)

c1 = value3

c2 = value4

i1 = 1

1. 使用 if/else 不起作用，它会做一个或另一个
2. 添加另一个 .find() 打破它
3. 使用 function(){} 不起作用。
4. 使用 append 或 appendTo 不起作用
5. This在这种情况下似乎不起作用

一定有办法做到这一点。谁能帮帮我？

Answer 1

这有效 - 演示在 http://jsfiddle.net/alnitak/82Tep/

var fields = {
    c1: 'text',
    c2: 'text',
    i1: 'val'
};

var data = $('.container .row').map(function(row, tr) {
    var obj = {};
    $.each(fields, function(key, func) {
        obj[key] = $('.' + key, tr)[func]();
    })
    return obj;
}).get();

早期版本不正确，因为我没有发现 OP 需要一个对象而不是内部维度的数组。

这种方法的优点是您可以在这些元素上调用 other jQuery 函数而无需更改实际代码 - 只需更改 fields 映射以说明您想要调用哪个函数打电话。