1

我在这里设置了一个示例：http: //jsfiddle.net/t7CKU/

这是我的 jQuery： 

var attr_index = 0;
$(document).on("propertychange keypress input paste", ".--variant-val-ul input:last", function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode != 9) {
        $(this).closest('ul').append('<li><i class="icon-li icon-level-up icon-rotate-90 text-light"></i><input type="text" name="options[' + attr_index + '][]" placeholder="Attribute Option"> <a class="grey-link no-underline --remove" title="Remove"><i class="icon-remove"></i></a></li>');
    }

});

这是相关的 HTML：

<ul class="icons-ul -li-margin-top-5 --variant-val-ul -v">
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" value="Small">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" value="Medium">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" value="Large">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
  <li>
    <i class="icon-li icon-level-up icon-rotate-90 text-light"></i>
    <input type="text" name="options[2][]" placeholder="Attribute Option">
    <a class="grey-link no-underline --remove" title="Remove">
      <i class="icon-remove"></i>
    </a>
  </li>
</ul>

在小提琴中，您会注意到仅当最后一个小于 size 的输入具有值时才会出现新输入。这应该发生在 a<ul>

有时这个 HTML 是通过 jQuery 动态生成的，完成后这个函数可以正常工作。它仅在 HTML 与页面一起加载时才起作用。

4

1 回答 1

3

将您的选择器更新为：

".--variant-val-ul li:last-child input"

http://jsfiddle.net/t7CKU/1/

这将选择input包含在任何li哪个是last-child（li每个列表中的最后一个）中的哪个。

于 2013-10-23T21:31:20.450 回答