javascript - Jquery Repeater 解析 jquery 中的值

Question

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

但是我们如何从像compacten[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，因此您可以使用其“属性包含选择器”功能 ( https://api.jquery.com/attribute-contains-selector/ ):

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

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

或者，如果您向输入字段添加一些类(class="hoeveel" 和 class="wat")，则可以循环 。成分enlijst并输出它们的值，如下所示:

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