使用jQuery來選擇評論中包含的元素

我解析DOM和有一個元素是這樣的：

<!-- <a class="pager" title="next" href="www.text.com">NEXT</a> -->

我需要能夠選擇使用jQuery這個元素，並返回其href價值。我已經試過這樣：

$('a.pager[title="Next"]').attr('href');

但無濟於事 - 從閱讀這裏Selecting HTML Comments with jQuery似乎jQuery的只能選擇與特定nodetype元素。

是否可以從上面的HTML元素返回值www.text.com？爲了讓事情變得更加棘手，我需要在不依賴jQuery插件的情況下執行此操作 - 只需要原生Javascript或純jQuery。

下面的代碼返回整個評論（以及包含在頁面上的所有其他註釋的文本）：

$("*") 
    .contents() 
    .filter(function(){ return this.nodeType == 8;}) 
    .each(function(){ alert(this.nodeValue);});

，但我只需要返回a href的價值，並沒有其他意見。想法？

來源

2013-06-20 Jascination

無法喲你隱藏那個元素而不是評論它？ – Edorka

http://stackoverflow.com/questions/9899216/selecting-text-between-comment-tags-with-jquery –

事實上，所有你需要做的是修剪：

var markup = $("*").contents().filter(function(){ 
    return this.nodeType == 8; 
}).get(0).nodeValue; 

var href = $($.trim(markup)).attr('href');

FIDDLE

編輯：

，使之更加具體，你總是可以做一些字符串匹配：

var markup = $("*").contents().filter(function(){ 
    return this.nodeType == 8 && this.nodeValue.indexOf('class="pager"') != -1; 
});

再次編輯：

你也可以這樣做：

var href = $.map($("*").contents(), function(el) { 
    var html = $.parseHTML($.trim(el.nodeValue)), 
     anchor = $('<div />').append(html).find('a.pager[title="next"]'); 

    return el.nodeType === 8 && anchor.length ? anchor.attr('href') : null; 
});

FIDDLE

來源

2013-06-20 10:31:26 adeneo

查看上面編輯的問題 - 頁面上有多個註釋，我只需要一個包含'title = 'next''，並從該元素中找到href。 – Jascination

@Jascination - 是否重要，當然你知道如何迭代，就像你在做這個問題一樣？ – adeneo

有點真實，但我不確定如何迭代並僅返回包含'title ='next''的註釋。 – Jascination

選擇的意見後，你需要分析其文本內容爲HTML，然後才能可靠地遍歷編碼DOM：

var matches = []; 
$("*").contents().each(function(){ 
    if(this.nodeType != 8) return; 
    var $div = $("<div>"); 
    $div.append(this.nodeValue); 
    $div.find("a.pager[title='next']").each(function(){ 
    //replace $(this).attr("href") with this.href if you don't mind 
    //relative URLs getting converted to absolute URLs 
    matches.push($(this).attr("href")) 
    }); 
});

來源

2013-06-20 10:47:53

這很接近，但由於某種原因代碼會返回頁面中的所有評論URL。看到這裏：http://jsfiddle.net/zM5se/159/點擊按鈕，並注意它也顯示了jsFiddle評論的網址。 – Jascination

@Jascination你是什麼意思？裏面有一個'href'的註釋，它被發現。不過，我注意到瀏覽器會將URL轉換爲絕對URL。如果那麼重要，'this.href'需要被替換：http://jsfiddle.net/zM5se/160/ –

@Jascination你已經使用了一個相對的URL，它解析了一個到JSFiddle的鏈接。 'this.href'屬性反映了實際的目標（至少在Chrome中），即使相應的屬性沒有。 –

-1

$("*") 
    .contents() 
    .filter(function(){ return this.nodeType == 8;}) 
    .each(function(){ 
     var regex = new RegExp('href=\"(.*)\"','g'); 
     var hrefValue = regex.exec(this.nodeValue)[1]; 
     alert(hrefValue); 
    });

來源

2013-06-20 11:00:29 codetantrik

爲什麼你使用'new RegExp'而不是字面語法？此外，如果頁面上的_any_評論沒有HREF，則會崩潰。 –

不使用文字語法應該得到負面評價？大聲笑。這將適用於頁面中具有href標籤屬性的所有評論。是的，你是對的，我需要檢查正則表達式是否實際返回匹配以避免崩潰。但它確實指向了正確的方向：P。休息由OP即興創作而成。 – codetantrik

如果發生不匹配就會發生崩潰，這足以保證得到一個downvote。我想知道是否應該使用正則表達式來回應Daniel的答案（我想我會）。「新RegExp」僅僅是一個值得要求解釋的紅旗。不，當他們聲稱他們完成時，答案不應該是不完整的。 –

使用jQuery來選擇評論中包含的元素

回答

相關問題