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从项目1，项目2，项目3中提取[AA,BB,CC]和ID [1,2,3]等ID之类的数组。如何做同样的事情？

Answer 1

循环输入，拉取值，解析项目值。像这样：

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);
});

Here is a working example（警告：两个警告弹出窗口）

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

如果页面上有其他input元素，您不希望包含这些元素，那么您需要更具体地使用选择器。例如，如果所有期望的input元素都包含id="container"元素，那么您可以使用此元素：

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

Answer 2

试试这个：

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

Here是jsfiddle：

Answer 3

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 4

尝试

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);

演示：Fiddle

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

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 8

试试这个：

$(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);
});

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

8 个答案: