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

当您遍历.MCQuestion的父元素时，您只能访问.formRight。使用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;
});

Answer 2

替换

$('#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

JQuery获取div中所有输入的值

2 个答案: