Jquery - - 어떻게 코드를 단순화합니까?

Question

현재 텍스트 상자에 사용자 entred 값을 가져 오는 중입니다. 아래 코드를 사용하여 드롭 다운하십시오.

var test = new Object(); 
test.attribute = $("#Attribute_0").val(); 
test.operand = $("#Operand_0").val(); 
test.value = $("#Value_0").val(); 

var test = new Object(); 
test.attribute = $("#Attribute_1").val(); 
test.operand = $("#Operand_1").val(); 
test.value = $("#Value_1").val(); 

그러나 목록 내가 그래서 내가 여기 온이 작업을 수행하는 다른 더 좋은 방법이 될 것입니다 생각 성장함에 따라.

<div> 
    <input id="Attribute_0" name="Attribute_1" type="text"> 
    <select id="Operand_0"> 
    <input id="Value_0" type="text"> 
</div> 

<div> 
    <input id="Attribute_1" name="Attribute_1" type="text"> 
    <select id="Operand_1"> 
    <input id="Value_1" type="text"> 
</div> 

내가 어떤 foreach 문이나 다른 더 좋은 방법이 내 코드를 단순화 할 수 아래

내 HTML 코드는 같은 것인가?

나중에 내 코드가 반복되는 업데이트

제안하십시오.

내가 이와 같은 10 개의 목록 속성을 가지고 있다고 가정 할 때 각 DIV에 대해 수동으로 gettin 값을 지정하는 것은 아무런 의미가 없습니다.

어떻게하면 코드 재 작성없이이 작업을 쉽게 할 수 있습니까?

Answer 1

map 방법을 사용할 수 있습니다.

var data = $('div.classname').map(function() { 
    var $elems = $(this).children(); 
    return { 
     attribute: $elems.eq(0).val(), 
     operand: $elems.eq(1).val(), 
     value: $elems.eq(2).val() 
    } 
}).get(); 

이제 data 변수가 객체의 배열입니다, 당신은 또한 당신의 폼 요소에 클래스를 추가하고 클래스 이름 대신 .eq 방법을 사용하여를 선택 할 수 있습니다.

Answer 2

effecient하기 위해, 그것은 당신이 <div> '를 보관하고이 클래스에 $.each을하고 각각의 클래스를 가진 더 나은 것,하지만 현재의 코드와 함께 당신이 할 수 있습니다

$.each($('div'), function(i, v) { 
    var test = new Object(); 
    test.attribute = $("#Attribute_" + i).val(); 
    test.operand = $("#Operand_" + i).val(); 
    test.value = $("#Value_" + i).val(); 
}); 

Answer 3

당신이 만약

<div class="item"> 
    <input class="Attribute" name="Attribute_0" type="text"> 
    <select class="Operand"> 
    <input class="Value" type="text"> 
</div> 

<div class="item"> 
    <input class="Attribute" name="Attribute_1" type="text"> 
    <select class="Operand"> 
    <input class="Value" type="text"> 
</div> 

이 할 수있는 것 :

$(".item").each(function(){ 
    var $item = $(this); 

    var test = new Object(); 
    test.attribute = $item.find(".Attribute").val(); 
    test.operand = $item.find(".Operand").val(); 
    test.value = $item.find(".Value").val(); 

    // do stuff with test 
}); 

,536 '을, 다음과 같이 당신의 HTML을 변경하고자 할 수있는 재

Answer 4

태그 이름에 foreach주기를 구성 할 수 있습니다. 다음과 같이 입력하십시오 :

for(int i=0;i<maxvalue; i++){ 
var test = new Object(); 
test.attribute = $("#Attribute_" + i).val(); 
test.operand = $("#Operand_"+ i).val(); 
test.value = $("#Value_"+ i).val(); 
}