使用 .contents() 和 .not() 仅定位文本而不是 children（或者我如何尝试使 webgrid 寻呼机的屏幕 reader 友好）

Question

我正在尝试使 .net webgrid 页脚屏幕 reader 友好。目前代码如下所示：

  <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>

目标是： - 在每个页码前加上单词 "Page"，包裹在一个跨度中，该跨度将与 CSS 一起使用，以对有视力的用户隐藏单词。 - 将当前页面包裹在一个元素中，这样我就可以将它与 s 一起定位，通过 CSS.

给它们填充

因为它是 .net，我真的没有办法直接编辑标记，所以我通过 jquery 或至少尝试这样做。我已经尽可能将 Page 附加到 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>");

我以为我正在使用 .contents() 到达某个地方，但是当我试图指定它不包裹锚点时，它就停止了一起工作。

我已经完成了这项任务的关键部分，如有任何帮助，我们将不胜感激。谢谢！

我在 fiddle 中有这个：http://jsfiddle.net/fallenturtle/p6n4ar57/3/

Answer 1

这里有一种包装 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/>');

来源：How do I select text nodes with jQuery?

Answer 2

我的一位同事帮助我解决了这个问题，我想与同样遇到此问题的任何人分享解决方案：

  $(".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>");
    }; 
  });

有兴趣的人可以使用小提琴笔：http://jsfiddle.net/fallenturtle/p6n4ar57/9/

使用 .contents() 和 .not() 仅定位文本而不是 children（或者我如何尝试使 webgrid 寻呼机的屏幕 reader 友好）

Using .contents() with .not() to only target text and not children (or how I'm trying to make webgrid pager's screen reader friendly)

html

javascript

jquery

accessibility

webgrid