我想找到所有可用的div.finput父元素并遍歷它們，然后洗掉div.fsetting子div.form-group元素并保留元素并將其附加到結果包裝器中div.result。
我怎樣才能做到這一點？
(($) => {
generateForm()
})(jQuery);
function generateForm() {
$(document).on('click', '.js-generate', function(e) {
let elementRows = $('.finput');
// alert(elementRows.length)
let html = '';
$.each(elementRows, function(i, v) {
html = elementRows.html();
});
$('.result').html(html);
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>>
</div>
<div class="form-group">
<input type="text" name="firatname" id="firstname">
</div>
</div>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>>
</div>
<div class="form-group">
<input type="email" name="email" id="email">
</div>
</div>
<button class="js-generate">generate</button>
<div class="result"></div>中的附加元素div.result應如下所示：
<div class="result">
<div class="form-group">
<input type="text" name="firstname" id="firstname">
</div>
<div class="form-group">
<input type="email" name="email" id="email">
</div>
</div>
uj5u.com熱心網友回復：
要在輸出示例中創建 HTML，您可以選擇元素的.form-group子.finput元素并將append()它們設定為.result. 然后你可以完全remove()原始的.finput元素。
(($) => {
generateForm()
})(jQuery);
function generateForm() {
$(document).on('click', '.js-generate', function(e) {
let $fInputs = $('.finput').remove();
let $formGroups = $fInputs.children('.form-group');
$('.result').append($formGroups);
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>
</div>
<div class="form-group">
<input type="text" name="firatname" id="firstname">
</div>
</div>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>
</div>
<div class="form-group">
<input type="email" name="email" id="email">
</div>
</div>
<button class="js-generate">generate</button>
<div class="result"></div>另請注意，(($) => {})(jQuery)您使用的結構是IIFE，而不是document.ready事件處理程式。在這種情況下，代碼很好，因為您使用的是委托事件處理程式，但是兩者之間存在有意義的差異，如果您不知道，這可能會導致您出現問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/388525.html
標籤：javascript 查询