如何使用jquery獲取多個類的輸入欄位的值

我對以下代碼的期望輸出應該是：

abcd,efgh,ijkl

注意逗號而不是-afterd和h。

但是下面的代碼導致

abcdefghijkl,abcdefghijkl,abcdefghijkl,

我嘗試搜索堆疊溢位，但沒有遇到此類問題。有人可以幫助我，請不要將此問題標記為重復性。

<div class="test1 yes">
 <input type="text" class="xyz" value="a" />
 <input type="text" class="xyz"  value="b" />
 <input type="text" class="xyz" value="c" />
 <input type="text" class="xyz" value="d" />
</div>

<div class="test2 yes">
 <input type="text" class="xyz" value="e" />
 <input type="text" class="xyz" value="f" />
 <input type="text" class="xyz" value="g" />
 <input type="text" class="xyz" value="h" />
</div>

<div class="test3 yes">
 <input type="text" class="xyz" value="i" />
 <input type="text" class="xyz" value="j" />
 <input type="text" class="xyz" value="k" />
 <input type="text" class="xyz" value="l" />
</div>

<input type="submit" class='submit'>

  <p class='count'></p> 
 <p class='test'></p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $('.submit').click(function(){
        var count = $('.yes').length
        $('.count').text(count);
       
        var texts = "";
        var i = 0;
    while (i < count) {
        texts  = $(".xyz").map(function() { return this.value; })
                                   .get().join('-')   ",";
        i  ;
    }

    $('.test').text(texts);    

    });
    

</script>

uj5u.com熱心網友回復：

回圈遍歷.yes元素，構建元素陣列.xyz并將其與 連接-，然后將結果與 連接,：

var texts = $(".yes").map(function() {
    return $(this).find(".xyz").map(function() {
        return this.value;
    }).get().join("-");
}).get().join(",");

現場示例：

顯示代碼片段

$('.submit').click(function() {
    var count = $('.yes').length
    $('.count').text(count);
    
    var texts = $(".yes").map(function() {
        return $(this).find(".xyz").map(function() {
            return this.value;
        }).get().join("-");
    }).get().join(",");

    $('.test').text(texts);

});

// a-b-c-d,e-f-g-h,i-j-k-l

<div class="test1 yes">
 <input type="text" class="xyz" value="a" />
 <input type="text" class="xyz"  value="b" />
 <input type="text" class="xyz" value="c" />
 <input type="text" class="xyz" value="d" />
</div>

<div class="test2 yes">
 <input type="text" class="xyz" value="e" />
 <input type="text" class="xyz" value="f" />
 <input type="text" class="xyz" value="g" />
 <input type="text" class="xyz" value="h" />
</div>

<div class="test3 yes">
 <input type="text" class="xyz" value="i" />
 <input type="text" class="xyz" value="j" />
 <input type="text" class="xyz" value="k" />
 <input type="text" class="xyz" value="l" />
</div>

<input type="submit" class='submit'>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 <p class='count'></p> 
 <p class='test'></p> 

<p style="font-weight: bold;" class="time text-center"></p>

更多的：

• jQuery.fn.map
• jQuery.fn.get

uj5u.com熱心網友回復：

這是因為您的 = 而發生的，這意味著它會在每次迭代時附加結果。我的解決方案是只寫=。

<div class="test1 yes">
 <input type="text" class="xyz" value="a" />
 <input type="text" class="xyz"  value="b" />
 <input type="text" class="xyz" value="c" />
 <input type="text" class="xyz" value="d" />
</div>

<div class="test2 yes">
 <input type="text" class="xyz" value="e" />
 <input type="text" class="xyz" value="f" />
 <input type="text" class="xyz" value="g" />
 <input type="text" class="xyz" value="h" />
</div>

<div class="test3 yes">
 <input type="text" class="xyz" value="i" />
 <input type="text" class="xyz" value="j" />
 <input type="text" class="xyz" value="k" />
 <input type="text" class="xyz" value="l" />
</div>

<input type="submit" class='submit'>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 <p class='count'></p> 
 <p class='test'></p> 

<p style="font-weight: bold;" class="time text-center"></p>

<script>
    $('.submit').click(function(){
        var count = $('.yes').length
        $('.count').text(count);
       
        var texts = "";
        var i = 0;
    while (i < count) {
        texts = $(".xyz").map(function() { return this.value; })
                                   .get().join('-')   ",";
        i  ;
    }

    $('.test').text(texts);    

    });
    

</script>

uj5u.com熱心網友回復：

代替

var texts = "";
var i = 0;
while (i < count) {
    texts  = $(".xyz").map(function() { return this.value; })
                               .get().join('-')   ",";
    i  ;
}

寫吧

var texts = ''
$('.yes').each(function() {
  textx  = $(this).children('.xyz')
                  .map(function() { return this.value; })
                  .get().join('-')   ','
})

標籤：jQuery

上一篇：jQuery范圍增加變數

下一篇：用陣列映射替換單詞