我正在創建完全靈活的聯系我們表單，用戶可以在其中拖放輸入元素。所以在那種情況下我陷入了一個問題
html結構是：
<div class="ns_field_box">
<input type="text" data-name="checkbox_label" class="nsdummy-label" value="CheckBox">
<span class="nscheckbox"></span> <input type="text" data-name="checkbox_desc" value="Add checkbox description">
<div class="nshandle">
<span class="dashicons dashicons-move"></span>
<span class="dashicons dashicons-trash nsremove_feild"></span>
</div>
</div>
我<div >將此元素存盤在 javascript 變數中，并希望在此變數中查找并存盤所有輸入元素
javascript代碼：
$(document).on('click', '#submit_form', function () {
var allelems = $('#B .ns_field_box');
for (i = 0; i < allelems.length; i ) {
var elem = allelems[i];
console.log(elem.children('input')); // at this line browser console says
// 'elem.children is not a function'
}
})
所需檔案已按正確順序設定
// jquery file
<script src='https://siga.local/nitin/plugins/wp-content/plugins/ns-contact-form/inc/assets/js/jquery.min.js?ver=3.6.0' id='ns_cf_jquery-js'></script>
<script src='https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js?ver=3.6.0' id='ns_cf_sortablejs-js'></script>
<script src='https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js?ver=1.14.0' id='ns_cf_jquerysortablejs-js'></script>
// main javascript file where the code I wrote
<script src='https://siga.local/nitin/plugins/wp-content/plugins/ns-contact-form/inc/assets/js/main.js?ver=1.0.0' id='ns_cf_js-js'></script>
和瀏覽器 javascript 控制臺說
main.js?ver=1.0.0:34 Uncaught TypeError:
elem.children is not a function
at HTMLButtonElement.<anonymous> (main.js?ver=1.0.0:34)
at HTMLDocument.dispatch (jquery.min.js?ver=3.6.0:2)
at HTMLDocument.v.handle (jquery.min.js?ver=3.6.0:2)
感謝所有提前幫助我的人
uj5u.com熱心網友回復：
$(document).on('click', '#submit_form', function () {
var allelems = $('#B .ns_field_box');
for (i = 0; i < allelems.length; i ) {
var elem = $(allelems[i]);
console.log(elem.children('input'));
}
})
uj5u.com熱心網友回復：
UsingjqueryCollection[i]回傳一個 DOM 物件，但您正在嘗試使用 jquery 的 children() 方法。
一種解決方案是更改為
var elem = $(allelems[i]);
保留elem為 jquery 物件。
您可以使用 jquery.each和使用使您的代碼更簡潔
var elem = $(this);
確保elem繼續作為具有所有 jquery 方法的 jquery 物件。
您的代碼段將更新為：
$(document).on('click', '#submit_form', function () {
var allelems = $('#B .ns_field_box');
allelems.each(function() {
var elem = $(this);
console.log(elem.children('input').length);
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/406163.html
標籤：
上一篇：使用jQuery和AJAX將表單的檔案和文本資料上傳到PHP
下一篇：按順序淡入/淡出元素