如何用jQuery在任意一塊HTML中查找元素？

我使用觀察到的突變Chrome擴展程序中，它的工作很好：如何用jQuery在任意一塊HTML中查找元素？

var insertedNodes = []; 
var observer = new MutationObserver(function (mutations) { 
    mutations.forEach(function (mutation) { 
     // loop through each chunk of html that changes on the page 
     for (var i = 0; i < mutation.addedNodes.length; i++){ 
      newHTMLChunk = mutation.addedNodes[i]; 
      //console.log(newHTMLChunk); 
     } 
    }) 
}); 
observer.observe(document, { 
    attributes: true, 
    childList: true, 
    characterData: true, 
    subtree:true 
});

每次迭代內（YouTube的內部在這種情況下），newHTMLChunk計算結果爲HTML像下面一大塊：

<li class="channels-content-item yt-shelf-grid-item"> 
    <div class="yt-lockup clearfix yt-lockup-video yt-lockup-grid vve-check" data-context-item-id="Kky3wgURBJ0" data-visibility-tracking="QJ2JxKig-K2mKg=="> 
     <div class="yt-lockup-dismissable"> 
     <div class="yt-lockup-thumbnail"> 
      <span class=" spf-link ux-thumb-wrap contains-addto"> 
       <a href="/watch?v=Kky3wgURBJ0" class="yt-uix-sessionlink" aria-hidden="true" data-sessionlink="ei=PkhhWMS-CoXMugKIxL_YDg&amp;feature=c4-videos-u"> <span class="video-thumb yt-thumb yt-thumb-196"> 
       <span class="yt-thumb-default"> 
       <span class="yt-thumb-clip"> 
       <img alt="" src="https://i.ytimg.com/vi/Kky3wgURBJ0/hqdefault.jpg?custom=true&amp;w=336&amp;h=188&amp;stc=true&amp;jpg444=true&amp;jpgq=90&amp;sp=68&amp;sigh=PSGK-mxzthJQOk44ZEKdd1jCrkA" onload=";__ytRIL(this)" width="196" data-ytimg="1" aria-hidden="true"> 
       ...more here ...

現在我想要做的是以下幾點：

獲取的句柄<img>元素。（它將是HTML塊中唯一的圖像元素。）
獲取包含data-context-item-id屬性的<div>元素的句柄。（在這個特殊情況下，值是Kky3wgURBJ0。）

jQuery是否可以在上面顯示的html任意塊中找到元素？或者它只能在整個網頁上運行？在此先感謝您的幫助。

來源

2016-12-26 HerrimanCoder

你做一些奇怪：爲什麼轉換addedNodes到HTML，如果你可以直接訪問它的DOM樹？ – wOxxOm

jQuery是否可以在上面顯示的html任意塊中找到元素？

是的，它可以。這是一個例子。

// create a container for your html 
var $div = $('<div>') 

// inject html 
$div.html(newHTMLChunk) 

// traverse 
$div.find('div[data-context-item-id="Kky3wgURBJ0"]')

編輯：這個也可以不用jQuery的完成，使用DocumentFragment

見Inserting arbitrary HTML into a DocumentFragment

來源

2016-12-26 17:25:52

很好，謝謝！ – HerrimanCoder

如何用jQuery在任意一塊HTML中查找元素？

回答

相關問題