Как добавить строки в .each l oop in jQuery - PullRequest
Новая
       1

Как добавить строки в .each l oop in jQuery

0 голосов
/ 17 января 2020

У меня проблемы с соединением строк в jquery. Я пробовал несколько способов, но продолжаю переписывать первую строковую переменную, оставляя только последнюю запись.

Мои строки поступают через al oop, где l oop получает значение некоторых полей ввода , Это нужно сделать следующим образом, так как скрипт в конечном итоге добавит больше полей ввода, когда они понадобятся пользователю, и поэтому у них не будет индивидуальных идентификаторов.

Код ниже, что я пытаюсь получить на выходе div это следующее

"яблоко, фрукты, 10, морковь, овощи, 5, тест, тест2,8"

, но на данный момент я получаю только "88" 

var value = '';
$('#submit').click(function(){
  $('li').each(function(){
    $('input').each(function(){
      value = $(this).val();
      value += value + ',';
    })
  })
  $('#out').html(value);
})
<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"
    ></script>
</head>
  <body>
    <ul id="ingrediants">
      <li>
        <input type="text" value="Apple" data-id="itemName">
        <input type="text" value="Fruit" data-id="description">
        <input type="text" value="10" data-id="qty">
      </li>
      <li>
        <input type="text" value="Carrot" data-id="itemName">
        <input type="text" value="Veg" data-id="description">
        <input type="text" value="5" data-id="qty">
      </li>
      <li>
        <input type="text" value="test" data-id="itemName">
        <input type="text" value="test2" data-id="description">
        <input type="text" value="8" data-id="qty">
      </li>
    </ul>
    <button id="submit">Submit</button>
    <div id="out"></div>
  </body>
</html>

Ответы [ 4 ]

2 голосов
/ 17 января 2020

Просто выберите все входы, отобразите их значения, а затем соедините их запятыми. Вам не нужно явно писать каждый оператор. 

value = $('li input').map((index, it) => it.value).get().join(',');

Рабочий образец: 

$('#submit').click(function() {
  // arrow function supported browsers
  var value = $('li input').map((index, it) => it.value).get().join(',');
  // non-arrow function supported browsers (older IE for example)
  var value = $('li input').map(function(index, it) { return it.value; }).get().join(',');
  $('#out').text(value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ingrediants">
  <li>
    <input type="text" value="Apple" data-id="itemName">
    <input type="text" value="Fruit" data-id="description">
    <input type="text" value="10" data-id="qty">
  </li>
  <li>
    <input type="text" value="Carrot" data-id="itemName">
    <input type="text" value="Veg" data-id="description">
    <input type="text" value="5" data-id="qty">
  </li>
  <li>
    <input type="text" value="test" data-id="itemName">
    <input type="text" value="test2" data-id="description">
    <input type="text" value="8" data-id="qty">
  </li>
</ul>
<button id="submit">Submit</button>
<div id="out"></div>
2 голосов
/ 17 января 2020

Вы каждый раз присваиваете переменную value в вашем for-loop. Измените его на следующее: 

var value = '';
$('#submit').click(function(){
  $('li').each(function(){
    $('input').each(function(){
      value += $(this).val() + ',';
    })
  })
  $('#out').html(value);
})
1 голос
/ 17 января 2020

Вы сбрасываете значение переменной value в l oop. 

var value = '';
$('#submit').click(function(){
  $('li').each(function(){
    $('input').each(function(){
      value = $(this).val(); //THIS LINE!
      value += $(this).val() + ","; //USE THIS INSTEAD
      value += value + ',';
    })
  })
  $('#out').html(value);
})
0 голосов
/ 17 января 2020

Вы должны удалить «li» каждый:

Примерно так:

РЕДАКТИРОВАТЬ: 

var value = '';
$('#submit').click(function(){
    $('input').each(function(){
      value += $(this).val() + ',';
    })
  $('#out').html(value);
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...