Help with jQuery if statement

Question

I have a paging system implemented for user comments and depending on which page you have clicked on I want to only show 3 page numbers in each direction. So if you clicked on page 6 then only show pages 2 - 9, so 7 total.

I have my html like so:

<div id="paging">
<span id="1" class="page"></span>
<span id="2" class="page"></span>
<span id="3" class="page"></span>
<span id="4" class="page"></span>
and so on...
</div>

jQuery/javascript like so:

$(".page").click(function() {
        var clicked = $(this).attr("id");

        var parent = $("#paging span");
        $(parent).each(function() {
            if($(this).attr("id")+ 3 >= clicked)
            $(this).removeClass("hidden");
            else
            $(this).addClass("hidden");
            });
});

So far all it does is apply the hidden class to any page numbers before the currently clicked one.

@SLaks: I don't think that's true. I've used IDs in HTML with jQuery before that were simply numeric. — jwir3
– jwir3, Commented Feb 7, 2011 at 22:29
@SLaks, I'm guessing that my javascript won't work in some browsers if the id starts with a number? In chrome it works fine. — The Muffin Man
– The Muffin Man, Commented Feb 7, 2011 at 22:31
I don't remember, but I wouldn't recommend it. Use a different attribute, such as data-page. — SLaks
– SLaks, Commented Feb 7, 2011 at 22:32

SLaks · Accepted Answer · 2011-02-07 22:27:10Z

3

$(this).attr("id") returns a string.

You need to convert this string to a number by writing parseInt($(this).attr("id"), 10).

answered Feb 7, 2011 at 22:27

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jAndy Over a year ago

I'd love to see +this.id also suggested.

The Muffin Man Over a year ago

so how can I rewrite if(parseInt($(this).attr("id"))+ 3 >= clicked) so that It will only show 3 pages in either direction, right now it will only show 3 to the left, but all pages to the right.

user229044 · Accepted Answer · 2012-07-31 15:50:39Z

Change your ids to be like 'P1', 'P2', etc. e.g.

<div id="paging">
    <span id="P1" class="page">A</span>
    <span id="P2" class="page">B</span>
    <span id="P3" class="page">C</span>
    <span id="P4" class="page">D</span>
    <span id="P5" class="page">E</span>
    <span id="P6" class="page">f</span>
    <span id="P7" class="page">g</span>
    <span id="P8" class="page">h</span>
    <span id="P9" class="page">i</span>
<!-- and so on... -->
</div>

Then change your javascript to:

$(".page").click(function() {
         var page_clicked = parseInt(this.id.replace(/^P/, ''));
         $(this).siblings('span').each(function() {
            var page_no = parseInt(this.id.replace(/^P/, ''));
            if((page_no >= (page_clicked-3)) && (page_no <= (page_clicked+3)))
                $(this).removeClass("hidden");
            else 
                $(this).addClass("hidden");
        });
});

or better still:

$(".page").click(function() {
         var page_clicked = parseInt(this.id.replace(/^P/, '')) - 1;
         var $pages       = $(this).siblings('span');
         var from         = Math.max(0,             page_clicked-3);
         var to           = Math.min($pages.length, page_clicked+3);

         $pages.addClass('hidden').slice(from,to).removeClass('hidden');
});

Collectives™ on Stack Overflow

Help with jQuery if statement

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related