Question

告诉我如何使用jQuery移动对象。我需要在span.over-span内的每个标签span.wpcf7-form-control-wrap内移动。 over-span必须位于输入旁边。这样一个带嵌套的标签我每页有3个。这需要在每个内部进行相同的移动。

结构是：

<label>
    <span class="wpcf7-form-control-wrap text-377">
        <input type="text" name="text-377" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name">
    </span>
    <span class="over-span">Name</span><br>
</label>

Answer 1

首先，您必须选择所有span.over-span，然后选择所有span.wpcf7-form-control-wrap并使用.each()方法迭代它们。在这个循环中，我们可以append来自target数组中的一个项目（我使用$(this).append(target[i])，它与$("span.wpcf7-form-control-wrap")[i].append(target[i])相同）。此操作后没有可见的更改，但您可以检查元素，并确保<span class="over-span"></span>位于<span class="wpcf7-form-control-wrap text-377"></span>内并位于input元素之后：

＆＃13;

var target = $("span.over-span");
$("span.wpcf7-form-control-wrap").each(function(i) {
  $(this).append(target[i]);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span class="wpcf7-form-control-wrap text-377">
    <input type="text" name="text-377" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name">
  </span>
  <span class="over-span">Name1</span><br>
</label>

<label>
  <span class="wpcf7-form-control-wrap text-377">
    <input type="text" name="text-377" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name">
  </span>
  <span class="over-span">Name2</span><br>
</label>

<label>
  <span class="wpcf7-form-control-wrap text-377">
    <input type="text" name="text-377" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name">
  </span>
  <span class="over-span">Name3</span><br>
</label>

＆＃13;

移动跨度jQuery

1 个答案: