javascript - 如何获取嵌套在其他 HTML 元素中的 HTML 元素的值？

Question

我有如下所示的 HTML 元素

<div id="container">
    <div>
        <span>
            <input type="text" id="item1" value="AA"/>
        </span>
    </div>
    <div>
        <span>
            <input type="text" id="item2" value="BB"/>
        </span>
    </div>
    <div>
        <span>
            <input type="text" id="item3" value="CC"/>
        </span>
    </div>
</div>

我需要使用 JavaScript 和 Jquery 从 item1、item2、item3中提取值[AA,BB,CC]和 ID的数组。如何做同样的事情？[1,2,3]

Answer 1

var arr = $('#container').find('input').map(function(){
  return $(this).val();
}).get();

var ids = $('#container').find('input').map(function(){
  return $(this).attr('id').replace('item','');
}).get();

http://jsfiddle.net/mohammadAdil/Qhm5J/1/

Answer 2

尝试

var idarray = [];
var valuearray = [];

$("#container input").each(function(){
   var $this = $(this);
   idarray.push($this.attr("id").substring(4));
   valuearray.push($this.val());
});

console.log(idarray);
console.log(valuearray);

演示：小提琴

Answer 3

var arrId = [], arrVal = [];
$("input[type='text']").each(function(){//find input text
  if(this.id && this.id.indexOf("item")===0){//check id starts with item
    arrId.push(this.id.replace("item",""));//push id
    arrVal.push(this.value);//push value
  }
});

http://jsfiddle.net/jGNy7/

Answer 4

尝试这个：

var vals = [];
var ids = [];
$("#container input").each(function(){
    vals.push($(this).val());
    ids.push($(this).attr("id").replace("item", ""));
});

这是jsfiddle：

Answer 5

var ids = $("input[id^='item']").map(function(i,e){
    return e.id;
});

var values = $("input[id^='item']").map(function(i,e){
    return $(e).val();
});

console.log(ids);
console.log(values);

工作示例：http: //jsfiddle.net/RLsCX ​​/

Answer 6

请参考 http://jsfiddle.net/2dJAN/8/

var ids = []
var values = []
$('#container input[type=text]').each(function() {
ids.push($(this).attr('id'));
values.push($(this).val())
})
alert(ids)
alert(values)

Answer 7

尝试这个：

$(document).ready(function() {
    var valuesArray = []
        , idsArray = [];
    $('#container').children().each(function() {
        valuesArray.push($(this).children().children().val());
        idsArray.push($(this).children().children().prop('id').substr(4));
    });
    alert(valuesArray);
    alert(idsArray);
});

Answer 8

循环输入，提取值，解析项目值。像这样的东西：

var ids = [];
var values = [];

$("input").each(function(){
   var input = $(this);
   var value = input.val();
   var id = input.attr("id").replace("item", "");

   ids.push(id);
   values.push(value);
});

这是一个工作示例（警告：两个警报弹出窗口）

请注意，输入值是使用 获取的input.val()，这将确保检索到的值是用户输入的当前值。如果您想要该属性value（用户键入其他内容不会更改该属性），您可以input.attr("value")改用

---

如果您input不想在页面上包含其他元素，那么您需要更具体地使用您的选择器。例如，如果所有需要的input元素都与元素一起使用id="container"，那么您可以使用它来代替：

$("#container input").each(...