CODEWITHSUNDEEP
jquery
Evan
Evan

Reputation: 3511

Wrap a span around pagination text using jquery

I have this HTML structure I can't edit, because of our CMS and as you can see it's missing a class/span making it difficult to style the active page, which is the '5'. Meanwhile, the end chevron is removed when the last pagination is active, which is the '7'.

Can someone provide a jquery solution to wrap <span></span> around the '5' when its active and when the last pagination is active, which is the '7', so I may style it?

  1. The active page will increase/decrease depending on the number selected, so it's not always going to be '5' and a '7' that requires the span.
  2. The jquery shouldn't touch summary "xx records / xx records per page / x pages" that exists within the same div block.
  3. When the last pagination is clicked, which is the 7, the chevron is removed and the active number is next to the summary. This isolated pagination would need the span tag without affecting the summary.

This is my fiddle to provide a demo: http://jsfiddle.net/evanmoore/yay9W/

Example 1:

<div class="pag">
    <a class="prev" href="http://www.example.com">‹‹</a>
    <a href="http://www.example.com">1</a>
    <a href="http://www.example.com">2</a>
    <a href="http://www.example.com">3</a>
    <a href="http://www.example.com">4</a>
    5
    <a href="http://www.example.com">6</a>
    <a href="http://www.example.com">7</a>
    <a class="prev" href="http://www.example.com">››</a>
    xx records / xx records per page / x pages 
</div>

Example 2: Then should the last pagination be active, in this case its the 7, the html looks like this:

<div class="pag">
    <a class="prev" href="http://www.example.com">‹‹</a>
    <a href="http://www.example.com">1</a>
    <a href="http://www.example.com">2</a>
    <a href="http://www.example.com">3</a>
    <a href="http://www.example.com">4</a>
    <a href="http://www.example.com">5</a>
    <a href="http://www.example.com">6</a>
    7 xx records / xx records per page / x pages 
</div>

This is my fiddle to provide a demo: http://jsfiddle.net/evanmoore/bqyYA/

Upvotes: 1

Views: 397

Answers (2)

Sushanth --
Sushanth --

Reputation: 55750

This should run for most of the cases .

The above solution does not work in many cases such as the markup in the fiddle that i have pasted here

var elms = $('.pag').contents().filter(function () {
  return this.nodeType === 3 && $.trim(this.nodeValue) != '';
});

elms.each(function () {
  var num = Number(this.nodeValue);
  if (!isNaN(num)) {
    this.nodeValue = num;
    $(this).wrap('<span class="lonerPage"></span>');
  }
});

Check Fiddle

Upvotes: 2

Dan A.
Dan A.

Reputation: 2924

Assuming that we want to wrap any content that is a text node except for the last one (which holds your summary), this should work:

$('div.pag').contents(':not(:last-child)').filter(function() {
  return this.nodeType == 3;
})
.wrap('<span></span>')

The .contents function is similar to the .children function, except that it also returns text nodes. The filter checks for a text node type. An added filter skips the final child node.

Here's the demo:

http://jsfiddle.net/36Wwt/

Upvotes: 3

Related Questions