Question

我遇到一个问题，匹配的结束标记正在迁移到它的对，而不是按照我列出语句的顺序包装内容。我想知道如何/为什么会发生这种情况。 JS功能：

$('.add-contributor-button').click(function(){
 $("<input type=\"text\" name=\"contributor\">").insertBefore('.add-contributor-button');
 $("<select>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"author\">Author</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"editor\">Editor</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"illustrator\">Illustrator</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"translator\">Translator</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"other\">Other</option>").insertBefore('.add-contributor-button');
$("</select>").insertBefore('.add-contributor-button');
});

之前的HTML（以及复制的目标是什么。）：

<input type="text" name="contributor">
<select>
 <option value="" name="author">Author</option>
 <option value="" name="editor">Editor</option>
 <option value="" name="illustrator">Illustrator</option>
 <option value="" name="translator">Translator</option>
 <option value="" name="other">Other</option>
</select>
<div class="add-contributor-button">+ Add Contributor</div>

单击div后生成的HTML（我从Firefox 50.1.0检查器工具获取此内容）：

<input type="text" name="contributor">
<select>
 <option value="" name="author">Author</option>
 <option value="" name="illustrator">Illustrator</option>
 <option value="" name="translator">Translator</option>
 <option value="" name="other">Other</option>
</select>
<input type="text" name="contributor">
<select></select>
 <option value="" name="author">Author</option>
 <option value="" name="illustrator">Illustrator</option>
 <option value="" name="translator">Translator</option>
 <option value="" name="other">Other</option>
<div class="add-contributor-button">+ Add Contributor</div>

Answer 1

我认为这里的问题是对insertBefore()在jQuery中的工作方式的误解。

insertBefore()不用于构建HTML行。如果你指定一个像$("<select>").insertBefore()这样的HTML元素，它会创建一个新的<select>元素并将其添加到你的页面，关闭标签等等。

话虽如此，我们可以保留该代码。毕竟，我们做想要一个新的<select>元素。但是，我们不是插入所有选项，而是追加它们，它们将它们作为子项添加到目标元素中。

像这样：

$('.add-contributor-button').click(function() {
    $("<input type=\"text\" name=\"contributor\">").insertBefore('.add-contributor-button');
    $("<select>").insertBefore('.add-contributor-button')
        .append("<option value=\"\" name=\"author\">Author</option>")
        .append("<option value=\"\" name=\"editor\">Editor</option>")
        .append("<option value=\"\" name=\"illustrator\">Illustrator</option>")
        .append("<option value=\"\" name=\"translator\">Translator</option>")
        .append("<option value=\"\" name=\"other\">Other</option>");
});

我应该注意，有一些更有效的方法可以做到这一点。我正在键入一个，但preg_match()如何使用原始输入，并使用按钮只是复制它们而不是创建新的每次都是从头开始。

Answer 2

让自己感到头痛并将<input>和<select>包裹在一个容器中（我使用了<fieldset>），然后.clone()。

<强>段

＆＃13;

$('.add-contributor-button').click(function() {
  var clone = $('.original').clone(true, true);
  clone.removeClass('original').addClass('clone').insertBefore('.add-contributor-button');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset class='original set'>
  <input type="text" name="contributor">
  <select>
    <option value="" name="author">Author</option>
    <option value="" name="editor">Editor</option>
    <option value="" name="illustrator">Illustrator</option>
    <option value="" name="translator">Translator</option>
    <option value="" name="other">Other</option>
  </select>
</fieldset>

<div class="add-contributor-button">+ Add Contributor</div>

＆＃13;

使用JQuery .insertBefore（）方法不在Order Given中执行

2 个答案: