Javascript 将.contents（）与.not（）结合使用，只针对目标文本，而不针对子对象（或者我如何使webgrid pager的屏幕阅读器友好）

我正在尝试使.NETWebGrid页脚屏幕阅读器友好。当前代码如下所示：

  <tr class="webgrid-footer">
    <td colspan="6">
      <a data-swhglnk="true" href="/Consultant?page=1">First Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">Previous Page</a>
      <a data-swhglnk="true" href="/Consultant?page=2">1</a> 
      <a data-swhglnk="true" href="/Consultant?page=2">2</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">3</a> 
      4
      <a data-swhglnk="true" href="/Consultant?page=5">5</a> 
      <a data-swhglnk="true" href="/Consultant?page=6">6</a> 
      <a data-swhglnk="true" href="/Consultant?page=5">Next Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=15">Last Page</a>
    </td>
  </tr>

  <tr class="webgrid-footer">
    <td colspan="6">
      <a data-swhglnk="true" href="/Consultant?page=1">First Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">Previous Page</a>
      <a data-swhglnk="true" href="/Consultant?page=2"><span class="at-hide">Page </span>1</a> 
      <a data-swhglnk="true" href="/Consultant?page=2"><span class="at-hide">Page </span>2</a> 
      <a data-swhglnk="true" href="/Consultant?page=3"><span class="at-hide">Page </span>3</a> 
      <span class="current"><span class="at-hide">Page </span>4</span>
      <a data-swhglnk="true" href="/Consultant?page=5"><span class="at-hide">Page </span>5</a> 
      <a data-swhglnk="true" href="/Consultant?page=6"><span class="at-hide">Page </span>6</a> 
      <a data-swhglnk="true" href="/Consultant?page=5">Next Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=15">Last Page</a>
    </td>
  </tr>

4.

但我希望它看起来像这样：

  <tr class="webgrid-footer">
    <td colspan="6">
      <a data-swhglnk="true" href="/Consultant?page=1">First Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">Previous Page</a>
      <a data-swhglnk="true" href="/Consultant?page=2">1</a> 
      <a data-swhglnk="true" href="/Consultant?page=2">2</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">3</a> 
      4
      <a data-swhglnk="true" href="/Consultant?page=5">5</a> 
      <a data-swhglnk="true" href="/Consultant?page=6">6</a> 
      <a data-swhglnk="true" href="/Consultant?page=5">Next Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=15">Last Page</a>
    </td>
  </tr>

  <tr class="webgrid-footer">
    <td colspan="6">
      <a data-swhglnk="true" href="/Consultant?page=1">First Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">Previous Page</a>
      <a data-swhglnk="true" href="/Consultant?page=2"><span class="at-hide">Page </span>1</a> 
      <a data-swhglnk="true" href="/Consultant?page=2"><span class="at-hide">Page </span>2</a> 
      <a data-swhglnk="true" href="/Consultant?page=3"><span class="at-hide">Page </span>3</a> 
      <span class="current"><span class="at-hide">Page </span>4</span>
      <a data-swhglnk="true" href="/Consultant?page=5"><span class="at-hide">Page </span>5</a> 
      <a data-swhglnk="true" href="/Consultant?page=6"><span class="at-hide">Page </span>6</a> 
      <a data-swhglnk="true" href="/Consultant?page=5">Next Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=15">Last Page</a>
    </td>
  </tr>

第4页

目标是： -在每个页码的前面加上“页面”这个词，这个词被包装在一个跨距中，这个跨距将与CSS一起使用，以对有视力的用户隐藏这个词。 -将当前页面包装在一个元素中，这样我就可以将其与s一起定位，通过CSS为它们提供填充

由于它是.net，我实际上没有直接编辑标记的方法，所以我通过jquery进行编辑，或者至少尝试这样做。我已经将页面添加到s中文本的开头

给我带来麻烦的是，当前页面没有包含任何内容，因此我无法正确定位它

当前我的脚本如下所示：

    $(".webgrid-footer td").contents().not("a").wrap("<span class='current'></span>");
     $(".webgrid-footer a").each(function (index) {
        var page = $( this ).text();
        if (page.match(/^\d+$/)) {
            $(this).prepend("<span class='at-hide'>Page </span>");
        }; 
   });
   $(".current").prepend("<span class='at-hide'>Page </span>");

$（.webgrid footer td”）.contents（）.not（“a”）.wrap（“”）；
$（“.webgrid页脚a”）。每个（函数（索引）{
var page=$（this.text（）；
如果（第页匹配（/^\d+$/）{
$（此）。前置（“页面”）；
}; 
});
$（“.current”）.prepend（“第页”）；

我以为我在使用.contents（）时取得了一些进展，但当我试图指定它而不是包装锚定时，它只是停止了一起工作

我已经到了这项任务的头发拉部分，所以任何帮助将不胜感激。谢谢

---

我这里有一把小提琴：

这里有一种包装textNode的方法：

<script>
    function getTextNodesIn(node, includeWhitespaceNodes) {
      var textNodes = [], nonWhitespaceMatcher = /\S/;

      function getTextNodes(node) {
          if (node.nodeType == 3) {
              if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                  textNodes.push(node);
              }
          } else {
              for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                  getTextNodes(node.childNodes[i]);
              }
          }
      }

      getTextNodes(node);
      return textNodes;
  }

  $(getTextNodesIn(document.body)).wrap('<span/>');

函数getTextNodesIn（节点，包括HiteSpaceNodes）{
var textNodes=[]，nonWhitespaceMatcher=/\S/；
函数getTextNodes（节点）{
if（node.nodeType==3）{
if（包括HiteSpaceNodes | | nonWhitespaceMatcher.test（node.nodeValue））{
textNodes.push（节点）；
}
}否则{
对于（变量i=0，len=node.childNodes.length；i

---

资料来源：

我的一位同事能够帮助我解决这个问题，我想为任何有这个问题的人分享解决方案：

  $(".webgrid-footer td").contents().filter(function() {
      if (this.nodeType === 3)
         return this; //Node.TEXT_NODE
      })
  .each(function(index) {
    var page = $(this).text();
    if (page.match(/\d+/)) {
   $(this).replaceWith("<span class='current'> <span class='at-hide'>Page "+page+"</span></span>");
    }
  })
  $(".webgrid-footer a").each(function (index) {
    var page = $( this ).text();
    if (page.match(/^\d+$/)) {
        $(this).prepend("<span class='at-hide'>Page </span>");
    }; 
  });

$（“.webgrid footer td”）.contents（）.filter（函数（）{
if（this.nodeType==3）
返回此；//Node.TEXT\u节点
})
.每个（功能（索引）{
var page=$（this.text（）；
如果（第页匹配（/\d+/））{
$（this）.replace为（“Page”+Page+”）；
}
})
$（“.webgrid页脚a”）。每个（函数（索引）{
var page=$（this.text（）；
如果（第页匹配（/^\d+$/）{
$（此）。前置（“页面”）；
}; 
});

---

这是给感兴趣的人的提琴笔：

谢谢。。。我尝试了这个解决方案，但没有成功。。。我是一个非常熟悉jquery的新手，所以也许我的错误是显而易见的？嗨，我不明白你是否已经解决了你的问题。如果不把你的确切代码，否则你可以改变你的问题解决的状态。你能更明确地说明你的代码对我来说很有效，但问题是它的目标是整个文档，但我特别需要它只针对下面未包装的节点“.webgrid footer td”（所以只有4个，而不是锚中的数字）。我想我可以用“.webgrid footer td”替换document.body，但这不起作用。抱歉，我太天真了。几乎是，但是getTextNodesIn接受对象DOM而不是jquery对象（witch几乎是DOM的数组），所以必须循环$（'.webgrid footer td'）.each（函数（i，el_-DOM）{$（getTextNodesIn（el_-DOM））.wrap（''）；}）