Question

我已经用html / js创建了一个转发器。在library的帮助下。我们想在用户点击按钮时解析数据。（还没有。）

但是我们如何从像ingredienten [0] [wat]这样的元素中读取数据？因为可能有很多成分[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"）中添加一些类，则可以循环遍历.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']");

＆＃13;

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>');
});

＆＃13;

<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>

＆＃13;

Jquery Repeater在jquery中解析值

2 个答案: