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();