將多個元素移動到新的div-有解無憂

我想在新的 div 中移動標簽、輸入和跨度元素。

結構是這樣的

<label for="" class="">First name</label>
<input id="fxb_8f3aee" class="form-control" type="text" value="" maxlength="255" placeholder="">
<span class="field-validation-valid" data-valmsg-replace="true"></span>

我想要這樣的新 div 中的標簽、輸入和跨度元素

<div class="form-group">
   <label for="" class="">First name</label>
   <input id="fxb_8f3aee" class="form-control" type="text" value="" maxlength="255" placeholder="">
   <span class="field-validation-valid" data-valmsg-replace="true"></span>
</div>

我可以使用以下代碼在 div 內移動標簽

var el = $('.form-control');
$(el).add($(el).prev('label')).wrapAll('<div />');

我怎樣才能將跨度元素移動到input element (class = form-control)內部form-group class div

我不想移動所有元素。HTML 結構幾乎沒有其他隱藏的輸入和標簽元素。我只想將 input[class=form-control] 上方的標簽和 input[class=form-control] 下方的 span 移動到新的 div

uj5u.com熱心網友回復：

這應該這樣做：

var el = $('.form-control');
el.add(el.prev('label')).add(el.next('span')).wrap('<div >');

.form-group {background-color:pink}

<script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
<label for="" class="">First name</label>
<input id="fxb_8f3aee" class="form-control" type="text" value="" maxlength="255" placeholder="">
<span class="field-validation-valid" data-valmsg-replace="true">span</span>

不需要包裝你的elwith $()，因為它已經是一個 jQuery 物件。此外，您可以使用更簡單.wrap()的而不是.wrapAll()旨在用于多個層的嵌套包裝。在你的情況下，你只用一層（）包裹<div >。

uj5u.com熱心網友回復：

您可以使用以下代碼將所有元素移動到 div 中：

var newElem = document.createElement('div')

Array.prototype.forEach.call(document.querySelectorAll('label, input, span'), function(c){
  newElem.appendChild(c);
});
document.body.appendChild(newElem);

創建一個新的 div
獲取一個nodeListdocument.querySelectorAll
在 nodeList 上使用Array#forEach.call來遍歷它并將每個元素附加到新創建的 div

這是改編自這個問題的答案。

uj5u.com熱心網友回復：

好吧，你可以按照我的JS代碼：

HTML 代碼 (index.html)：

<!DOCTYPE html>
<html>

<body>

  <label id="lbl" for="" class="">First name</label>
  <input id="fxb_8f3aee" class="form-control" type="text" value="" maxlength="255" placeholder="">
  <span id="spn" class="field-validation-valid" data-valmsg-replace="true"></span>

  <div class="form-group"></div>


  <!-- Add Your Custom Script Here -->
  <script type="text/javascript" src="/myScript.js"></script>
</body>

</html>

這是'myScript.js'檔案：

const labelNode = document.getElementById('lbl');
const inputNode = document.getElementById('fxb_8f3aee');
const spanNode = document.getElementById('spn');
const divNode = document.getElementsByClassName('form-group')[0];

divNode.appendChild(labelNode);
divNode.appendChild(inputNode);
divNode.appendChild(spanNode);

請記住，不要嘗試一次插入所有節點。逐步插入每個節點。我認為很容易理解我的代碼。

uj5u.com熱心網友回復：

var el = $('.form-control');
let nextSpan = $("#fxb_8f3aee").next('span');
$(el).add($(el).prev('label')).wrapAll('<div />');
$(el).add(nextSpan).wrapAll('<div />');

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<label for="" class="">First name</label>
<input id="fxb_8f3aee" class="form-control" type="text" value="" maxlength="255" placeholder="">
<span class="field-validation-valid" data-valmsg-replace="true"></span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/493884.html

標籤：javascript jQuery 包装

上一篇：如何使用Scikit-Learn的RandomizedSearchCV和Tensorflow的ImageDataGenerator

下一篇：如果列條目包含NaN，則洗掉行