jQuery-以字符串形式獲取DOM的一部分

Question

我有這樣的html代碼：

<div id="sample" style="height: 100px">
     <div class="test">
       ...
     </div>
     <div class="test">
       ...
     </div>
     <div class="test">
       ...
     </div>
     ...
 </div>

我需要從此DOM中獲取<div id="sample" style="height: 100px">字符串。 我怎樣才能做到這一點？

Answer 1

假設您要獲取div的HTML作為字符串，而該字符串中沒有子元素，則一種方法可能是選擇該元素，對其進行克隆（以避免與DOM混淆），將克隆包裝在另一個元素中，然后爬網到該元素並獲取該元素的內容。

    var str = $("#sample").clone().empty().wrap("<div/>").parent().html();

這是一個jsfiddle-demo 。 所以要澄清一下：

.clone（）產生：

<div id="sample" style="height: 100px">
 <div class="test">
   ...
 </div>
 <div class="test">
   ...
 </div>
 <div class="test">
   ...
 </div>
 ...
</div>

.empty（）

<div id="sample" style="height: 100px"></div>

旁注： 在這里，您可以獲取原始DOM元素並訪問outerHTML屬性（即$("#sample").clone().empty()[0].outerHTML ，而不是使用.wrap().parent().html() $("#sample").clone().empty()[0].outerHTML ）。 但是，首先提到的方法克服了跨瀏覽器兼容性問題。

.wrap("<div/>")

<div><div id="sample" style="height: 100px"></div></div>

.parent（）指的是新創建的外部div ，而.html()返回該內容的內容，這將為您留下字符串<div id="sample" style="height: 100px"></div>

Answer 2

嘗試這個

var str = $('#sample')[0].outerHTML.split('\n')[0];

alert(str);

http://jsfiddle.net/d27frp8a/

Answer 3

只是另一種方式：

var element = $('#sample')[0];
var outer = element.outerHTML;
var inner = element.innerHTML;
var line = outer.substring(0, outer.indexOf(element.innerHTML));

1. 獲取完整元素的字符串表示形式
2. 獲取內部內容的字符串表示形式
3. 從一開始就獲得一個子字符串，直到內部發生變化