JQuery獲取div中所有輸入的值

Question

我在控制面板中有很多這些多項選擇選項，我希望使用JQuery將輸入的數據輸入到文本字段中。格式最好是Question，AnswerOpt1，AnswerOpt2 ....我已經嘗試了下面提供的代碼和它的一些變體，但一直不成功。

HTML

<div class="formRow"> 
    <label>Multiple Choice: </label> 
    <div class="formRight"> 
     Question: <input type="text" class="MCQuestion" /> 
    </div> 
    <div class="formRight MCAns"> 
     Answer Option1: <input type="text" class="MCAnswer"/> 
    </div> 
    <div class="formRight MCAns"> 
     Answer Option2: <input type="text" class="MCAnswer"/> 
    </div> 
</div> 

<div><a href="#" id="Save">Save</a></div> 
<div id="log"></div> 

的Javascript

$("#Save").on("click",function() { 
    $(".MCQuestion").each(function(){ 
     if($(this).val()!=""){ 
      $(this).parent().find(".MCAnswer").each(function(){ 
       $('#log').after($(this).val()); 
      }); 
     } 
    }); 
return false; 
}); 

Answer 1

更換

$('#log').after($(this).val()); 

與

$('#log').append($(this).val() + ' '); 

編輯

而且這條線是一個問題

$(this).parent().find(".MCAnswer") 

更換

$(this).closest('.formRow').find(".MCAnswer") 

.parent獲取有關元素的直接母公司的。但類別MCAnswers的元素存在於formRow元素中，而不是直接父元素。

在多次使用時緩存選擇器也是一個更好的主意。

代碼

$("#Save").on("click", function() { 
    $(".MCQuestion").each(function() { 
     var $this = $(this), 
      value = $this.val(); 
     if (value != "") { 
      $this.closest('.formRow').find(".MCAnswer").each(function() { 
       $('#log').append(value + ' '); 
      }); 
     } 
    }); 
    return false; 
}); 

Check Fiddle

Answer 2

當你穿越最多你只能得到以.formRight的.MCQuestion父元素。使用closest去到.formRow然後回落到每一個.MCAnswer：

$("#Save").on("click",function() { 
    $(".MCQuestion").each(function(){ 
     if($(this).val()!=""){ 
      $(this).closest(".formRow").find(".MCAnswer").each(function(){ 
       $('#log').after($(this).val()); 
      }); 
     } 
    }); 
    return false; 
});