移動範圍jQuery

Question

告訴我如何使用jQuery移動對象。我需要在span.wpcf7-form-control-wrap內的每個標籤span.over-span內移動。 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()方法遍歷它們。並且在這個循環中，我們可以用target數組（$(this).append(target[i])，它與$("span.wpcf7-form-control-wrap")[i].append(target[i])相同）中的一個項目append。有此手術後沒有明顯的變化，但你可以檢查元素是肯定的，那<span class="over-span"></span>裏面<span class="wpcf7-form-control-wrap text-377"></span>和input元素後雲：

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

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