JQuery 查找并更新子元素的属性然后返回父元素

Question

我有一个表示复选框的字符串，如下所示：

var checkbox = "<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1"/></label></div>";

我想选中复选框（添加属性 checked="checked"），使字符串变为：

<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label></div>;

我尝试了以下方法：

$(checkbox).find('input').attr('checked', true).end().html();

这将返回以下内容：

<label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label>

我的问题是为什么没有返回第一个 div 以及如何返回整个内容，例如：

<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label></div>;

Answer 1

jquery 中的html()使用innerHTML属性。 在这种情况下，需要使用outerHTML ，所以

尝试使用prop('outerHTML')

 var checkbox = '<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1"/></label></div>'; console.log($(checkbox).find('input').attr('checked', true).end().prop('outerHTML'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

参考

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Answer 2

尝试这个

$($(checkbox).find('input').attr('checked', true).end().parentNode).html();