Jquery 转发器解析 jquery 中的值

Question

我在 html/js 中创建了一个转发器。借助这个library。我们希望在用户单击按钮时解析数据。（还没有。）

但是我们如何从像 ingredienten[0][wat] 这样的元素中读取数据因为可以有很多成分en[n][wat]

这是我们的代码，可以更好地了解问题：

<div id="tes0t" data-repeater-list="ingredienten">
    <div class="ingredientenlijst" data-repeater-item="">
      <input type="text" name="ingredienten[0][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[0][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div>

  <div class="ingredientenlijst" data-repeater-item="" style="">
      <input type="text" name="ingredienten[1][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[1][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div><div class="ingredientenlijst" data-repeater-item="" style="">
      <input type="text" name="ingredienten[2][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[2][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div><div class="ingredientenlijst" data-repeater-item="" style="">
      <input type="text" name="ingredienten[3][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[3][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div></div>

我们尝试用 jquery 阅读它。但我认为我们遗漏了一些东西。

Answer 1

由于您使用 jQuery，您可以使用它的 'Attribute Contains Selector'-功能 (https://api.jquery.com/attribute-contains-selector/):

jQuery('input[name*="wat"]').each(function(e)
{
    console.log($(this).val());
});

这将遍历名称中包含 'wat' 的所有输入元素，并在控制台中输出值。

或者，如果您将一些类添加到输入字段（class="hoeveel" 和 class="wat"），您可以遍历 .ingredientenlijst 并像这样输出它们的值：

jQuery('.ingredientenlijst').each(function(e)
{
    console.log($(this).find('.hoeveel').val() + ' van ' + $(this).find('.wat').val());
});

Answer 2

如本 JS Fiddle 一样，使用 hoeveel 占位符获取输入

var itemsHoeveel = $('input').filter("[placeholder='Hoeveel']");

对于 Van wat

的输入

var itemsWat = $('input').filter("[placeholder='Van wat']");

var itemsHoeveel = $('input').filter("[placeholder='Hoeveel']");
var itemsWat = $('input').filter("[placeholder='Van wat']");
itemsHoeveel.each(function() {
  $('#result').append($(this).attr('name') + '<br>');
});

$('#result').append('<hr>');
itemsWat.each(function() {
  $('#result').append($(this).attr('name') + '<br>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tes0t" data-repeater-list="ingredienten">
  <div class="ingredientenlijst" data-repeater-item="">
    <input type="text" name="ingredienten[0][hoeveel]" placeholder="Hoeveel">
    <input type="text" name="ingredienten[0][wat]" placeholder="Van wat">
    <input data-repeater-delete="" type="button" value="Delete">
  </div>
  <div class="ingredientenlijst" data-repeater-item="" style="">
    <input type="text" name="ingredienten[1][hoeveel]" placeholder="Hoeveel">
    <input type="text" name="ingredienten[1][wat]" placeholder="Van wat">
    <input data-repeater-delete="" type="button" value="Delete">
  </div>
  <div class="ingredientenlijst" data-repeater-item="" style="">
    <input type="text" name="ingredienten[2][hoeveel]" placeholder="Hoeveel">
    <input type="text" name="ingredienten[2][wat]" placeholder="Van wat">
    <input data-repeater-delete="" type="button" value="Delete">
  </div>
  <div class="ingredientenlijst" data-repeater-item="" style="">
    <input type="text" name="ingredienten[3][hoeveel]" placeholder="Hoeveel">
    <input type="text" name="ingredienten[3][wat]" placeholder="Van wat">
    <input data-repeater-delete="" type="button" value="Delete">
  </div>
</div>
<hr>
<div id="result"></div>

Jquery 转发器解析 jquery 中的值

Jquery Repeater parse values in jquery

javascript

forms

jquery

repeater