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

Question

I'm trying to make the .net webgrid footer screen reader friendly. Currently the code looks like this:

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

But I want it to look like this:

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

The goals being to: - Preface each page number with the word "Page" wrapped in a span that will be used with CSS to hide the word from sighted users. - Wrap the current page in an element so I can target it along with the s to give them padding via CSS.

Since it's .net I don't really have a way to edit the markup directly so I'm doing it through jquery, or at least trying to. I've gotten as far as getting it to append Page to the beginning of the text that is within s.

What's giving me trouble is the fact that the current page isn't wrapped in anything, so I'm having trouble properly targeting it.

Currently my script looks like this:

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

I thought I was getting somewhere using .contents() but when I tried to specify it not wrap anchors it just stopped working all together.

I've gotten to the hair pulling part of this task, so any help would be appreciated. Thanks!

I have this in a fiddle here: http://jsfiddle.net/fallenturtle/p6n4ar57/3/

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

here a way to wrap 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/>');

source: How do I select text nodes with jQuery?

edited May 23 '17 at 12:01

Community

1
1

answered Dec 23 '16 at 23:34

bormat

1,309
12
16

Thanks... I tried this solution though and it didn't work... I'm very much a jquery novice, so maybe my error is obvious? – fallenturtle Dec 24 '16 at 00:41
hi, I don''t understand if you have resolved your problem or not. if not put the exact code you have else you can change the status of your question as resolved. – bormat Dec 24 '16 at 07:29
Can you bé more explicite – bormat Dec 29 '16 at 07:15
Your code kind of works for me, but the problem is that its targeting the whole document but I specifically need it to only target unwrapped nodes below ".webgrid-footer td" (so only the 4, but not the numbers within anchors). I thought I could replace document.body with ".webgrid-footer td" but that didn't work. Sorry, I'm so naive. – fallenturtle Jan 09 '17 at 22:07
almost but getTextNodesIn accept an object DOM not an jquery object(witch is almost an array of DOM) so you have to loop. $('.webgrid-footer td').each(function(i,el_DOM){ $(getTextNodesIn(el_DOM)).wrap(''); }) – bormat Jan 10 '17 at 22:46

score 0 · Accepted Answer · answered Jan 10 '17 at 00:21

A coworker of mine was able to help me figure this out and I wanted to share the solution for anyone who also has this issue:

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

Here's the fiddlepen for anyone interested: http://jsfiddle.net/fallenturtle/p6n4ar57/9/

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

2 Answers2