Question

是否有一些jquery魔法可以让我做以下事情：

[0-在HTML中定义一些元素（例如，未选中复选框）]

1-通过使用.attr（）设置其中一个属性来更新其DOM元素（例如，通过使用.attr（'checked'，true）设置其“checked”属性）

2-暂时从DOM中删除该元素

3-将原始元素重新插入到DOM中，同时保留其所有属性（即，使其在步骤1-结束时进行检查 - 不像最初在HTML中定义时那样）

我有兴趣从DOM中删除这些元素（而不是隐藏它们）的原因是我注意到它似乎可以提高性能。我的页面有三个不同的“状态”，在任何给定的状态下只需要DOM元素总数的三分之一。 [我希望将其保留为具有不同状态的单页，而不是将其分成三个单独的页面。]

到目前为止，我一直在删除元素并将元素重新插入到DOM中，方法是将值存储在

中

$("#myElement").html()

然后将其删除，但现在我注意到，在将HTML重新插入DOM后，[在步骤1中]所做的更改已“撤消”。

有没有办法做到这一点 - 暂时从DOM中删除不需要的东西，以保留其所有属性以便以后重新插入？

感谢任何见解，

拉拉

Answer 1

问题回答六天后，jQuery发布了1.4，其中包含detach方法。这正是你正在寻找的。

var detached = $('#element').detach();
$('body').append(detached);

Answer 2

您可以使用clone方法：

var els = $('.els'), saved = els.clone (true);
els.remove ();
// .... do other stuff
saved.appendTo ($('.wherever-you-want-to'));

尽管如此，最好还是展示＆amp;隐藏它们（例如通过display: none），而不是操纵DOM，因为它非常昂贵。如果必须，请使用DOM插入＆amp;删除（如上所述），而不是每次都从给定字符串重新创建节点的.html ()。

Answer 3

只需从文档中删除元素并保留对它的引用即可。没有必要克隆它。

var el;

function removeEl() {
    el = $("#myElement")[0]; // Get the element itself
    el.parentNode.removeChild(el);
}

function reinsertEl(node) {
    node.appendChild(el);
}

除了您在示例中提到它之外，直接设置复选框的checked属性而不是使用attr()更简单，更清晰，更快捷。根本不需要涉及属性，事实上jQuery的attr() 通常没有。只做$("#myElement")[0].checked = true;。它适用于所有主流浏览器。

Answer 4

这并不完全相关，但是稍后可能会对其他人有所帮助。我发现使用较小的复选框可以更轻松地防止完全选中它们。在您可能具有不同价值的调查表或一系列产品选项的情况下，这可能会派上用场。您甚至可以查看在更改另一个元素或有问题的元素时更改输入的属性，这可能会创建很多很酷的东西，这是我在堆栈溢出中为此Set new id with jQuery找到的一个很好的链接。

$("#ch1").change(function() {
$("#ch1").prop('disabled', true);
});
$("#ch2").change(function() {
$("#ch2").prop('disabled', true);
});
$("#ch3").change(function() {
$("#ch3").prop('disabled', true);
$("#ch4").prop('disabled', false);
});
$("#ch4").change(function() {
$("#ch4").prop('disabled', true);
$("#ch3").prop('disabled', false);
});
// ----> using Name selector :
//$('input[name="checkbox5"]').click(function(){
//$('input[name="checkbox6"]').prop('checked', false);			 
//    });
//$('input[name="checkbox6"]').click(function(){
//$('input[name="checkbox5"]').prop('checked', false);			 
//    });
// ----> using ID selector :
//$('input[id="ch5"]').click(function(){
//$('input[id="ch6"]').prop('checked', false);			 
//    });
// OR
//$("#ch5").click(function(){
//$("#ch6").prop('checked', false);
// });
//$("#ch6").click(function(){
//$("#ch5").prop('checked', false);			 
//    });
// ----> Using Class Selector :
$("input.checklast").change(function() {
    $("input.checklast").not(this).prop("checked", false);
  });
// which is shorter but requires that classes must be separated individually or grouped.
$("#ch5").change(function() {
$("#ch5").prop('disabled', true);
$("#ch6").prop('disabled', false);
});
$("#ch6").change(function() {
$("#ch6").prop('disabled', true);
$("#ch5").prop('disabled', false);
});

input[type=checkbox] {
  transform: scale(1.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Disabled checkboxes once checked</h1>
<form name="form1" id="form1">
<label for="ch1">Checkbox1:</label>
<input type="checkbox" name="checkbox1" id="ch1">
<br><br>
<label for="ch2">Checkbox2</label>
<input type="checkbox" name="checkbox2" id="ch2">
<br><br>
<input type="reset" name="resform1" id="resetf1">
</form>
<form name="form2" id="form2">
<h1> Checkboxes disabled if either is selected</h1>
<label for="ch3">Checkbox3:</label>
<input type="checkbox" name="checkbox3" id="ch3">
<br><br>
<label for="ch4">Checkbox4</label>
<input type="checkbox" name="checkbox4" id="ch4">
</form>
<h1> Combine Second Example with uncheck if checked and you get:</h1>
<form name="form3" id="form3">
<label for="ch5">Checkbox3:</label>
<input type="checkbox" class="checklast" name="checkbox5" id="ch5">
<br><br>

<label for="ch6">Checkbox4</label>
<input type="checkbox" class="checklast" name="checkbox6" id="ch6">
</form>

暂时删除并稍后重新插入DOM元素？

4 个答案: