Question

我有一个奇怪的问题，我想知道这是否可能。

我正在解析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的元素。

是否可以从上面的www.text.com元素返回值HTML？为了让事情变得有点棘手，我需要在不依赖jQuery插件的情况下完成它 - 只需原生Javascript或普通jQuery。

以下代码返回整个注释（以及页面上所有其他注释中包含的文本）：

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

但我只需要返回a href的值，而不是其他评论。想法？

Answer 1

实际上，你所要做的就是修剪它：

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

Answer 2

选择注释后，您需要先将其文本内容解析为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"))
  });
});

Answer 3

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

使用jQuery选择注释中包含的元素

3 个答案: