Pagination nested a tag value is not picked up by jQuery

Question

I have this pagination div:

<div class="pagination"><ul><li><a href="javascript:void(0);">Prev</a></li>
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);" value="2">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">4</a></li><li><a href="javascript:void(0);">5</a></li>
<li><a href="javascript:void(0);">Next</a></li></ul></div>

this is my jQuery code:

$(function () {
    $(document).on("click", "a#pagniated_list", function () {
        getPagnatedQs(this);
    });
});

function getPagnatedQs(element) {
    var User = new Object();
    User.page = $('.pagination').val();
    console.log(User.page);
}

I can not figure out why I can not pickup the value of the li which is number 1 ~ 5. I tried also .pagination ul li not working neither.

Update

I just want to mention that the value picked up will be using as a numeric calculation in client side js. the one pick up with .html did not work.

"I just want to mention that the value picked up will be using as a numeric calculation" I provided an answer 15 minutes ago that showed how to get the 0-based index of the link clicked = good for calculations. — MikeSmithDev, Dec 09 '13 at 15:02

PaddyDwyer · Answer 1 · 2013-12-09T15:24:40.867

2

If you want the text value of the selected link, you can get it by changing your function to

function getPagnatedQs(element) {
    var User = new Object();
    User.page = $(element).text();
    console.log(User.page);
}

edited Dec 09 '13 at 15:24

answered Dec 09 '13 at 14:44

PaddyDwyer

475
3
8

@MikeSmithDev it actually worked, I tried his answer (well, I came out the same solution before looked at his actually lol however all of your answer are kind valid. However, MikeSmithDev, your answer is a bit limited since I can not use index to detect prev, and next button in the pagination. However I can do with .text() (I suppose, since I can still pickup a unique text). Point out if anything I said is wrong – ey dee ey em Dec 09 '13 at 15:11
@kertap, what is the diff between your .text solution or use .html? Could you explain a bit further on why to do one and why not do other? please elaborate thanks! – ey dee ey em Dec 09 '13 at 15:40
@Chen how is my answer limited? I have the exact same code as this answer, plus another option to get index instead of text. I went that route so as to not modify the HTML, although I think you would benefit from doing that as well. – MikeSmithDev Dec 09 '13 at 16:10
@MikeSmithDev I see, I did not see the .text before. my appology Seem you got a more rounder answer than kertaps. Thanks – ey dee ey em Dec 09 '13 at 16:14

Develoger · Answer 2 · 2013-12-09T15:07:26.710

1

EDIT:

Here is JS FIDDLE: http://jsfiddle.net/KA72x/16/

Use...

HTML:

<div class="pagination">
<ul>
    <li><a href="javascript:void(0);" alt="prev">Prev</a></li>
    <li><a href="javascript:void(0);" alt="1">1</a></li>
    <li><a href="javascript:void(0);" alt="2">2</a></li>
    <li><a href="javascript:void(0);" alt="3">3</a></li>
    <li><a href="javascript:void(0);" alt="4">4</a></li>
    <li><a href="javascript:void(0);" alt="5">5</a></li>
    <li><a href="javascript:void(0);" alt="next">Next</a></li>
</ul>
</div>
<div>you have clicked on: <div id="choice"></div></div>

Jquery:

$(".pagination li a").click(function(event) {
    event.preventDefault();
    var current_element = $(this);
    var cur_elem_content = current_element.attr("alt");
    $("#choice").html(cur_elem_content);
});

edited Dec 09 '13 at 15:07

answered Dec 09 '13 at 14:40

Develoger

3,950
2
24
38

I would prefer `.text()` to `.html()` if the OP doesn't want markup. Also, there are [faster ways than either of those](http://stackoverflow.com/questions/7690627/how-to-retrieve-the-text-of-a-dom-text-node) using pure Javascript and native DOM methods. – Robusto Dec 09 '13 at 14:53
1

Yes, it works. That's not the point of my comment. What if the OP has more than text in there? If the `a` element encloses `span` or `emphasis` or other markup, `.html()` will return those with it. – Robusto Dec 09 '13 at 14:59
Ok I have edited the fiddle, I have added alt attribute to a tags so that you get them with jquery... You just need to put alt tags on every a tag. – Develoger Dec 09 '13 at 15:04
interesting solution, which is better your .html or .text? is there difference? – ey dee ey em Dec 09 '13 at 15:39
.html() treats the string as HTML, .text() treats the content as text. In your case maybe it is better to go with text() but in my solution you do not need to use either of them since I have used .attr() to get "alt" attribute of "a" tag... – Develoger Dec 09 '13 at 15:47
@Dušan Radojević Your answer is unique, but may not needed in this case. However, useful regardless! +1 – ey dee ey em Dec 09 '13 at 15:55

MikeSmithDev · Accepted Answer · 2013-12-09T14:52:47.937

You could try something like:

<script>
    $(function () {
        $(".pagination a").on("click", function () {
            getPagnatedQs(this);
        });
    });

    function getPagnatedQs(element) {
        var User = new Object();

        User.page = $(".pagination a").index(element); //get the zero based index
        console.log(User.page); //where "previous" = 0, and "next" = 6

        User.page = $(element).text(); //get the text of the anchor
        console.log(User.page);
    }
</script>

I couldn't get your code to work at all, so I changed the initial selector so it finds the anchor tags found in the element with .pagination class.

The first option shows how to get the index of the element clicked. The 2nd will just get you the text of the anchor tag. Which one you use depends on what you are trying to do with User.page. But with a name like page, it seemed that the index would be more fitting.

score 1 · Answer 4 · answered Dec 09 '13 at 15:08

1

It's a good practice to include the actual page url, so it degrades gracefully as such:

<div class="pagination">
    <ul>
        <li><a href="/page/0">Prev</a></li>
        <li><a href="/page/1">1</a></li>
        <li><a href="/page/2">2</a></li>
        <li><a href="/page/3">3</a></li>
        <li><a href="/page/4">4</a></li>
        <li><a href="/page/5">5</a></li>
        <li><a href="/page/2">Next</a></li>
    </ul>
</div>

There are several ways to extract page number, either thru the URL or text, and use event delegation for smaller memory foot print:

$(".pagination").on("click","a", getPagnatedQs);
function getPagnatedQs(ev) {
    ev.preventDefault();
    var User = new Object();

    User.page = $(this).text();
}

answered Dec 09 '13 at 15:08

Lance

865
8
19

How it different than kertap's answer? – ey dee ey em Dec 09 '13 at 15:38
I showed you the proper way to do click event for both html & js. In case user doesn't have js for any reasons, at least the link allows user to go to a different page. Google "javascript:void(0)", it's not a good practice anymore. Also, when you use click event, you pass the event var to the callback function, not the element, meaning: $("#something").click(callbackFunctionName(event)). In the event variable, you can extract the event type and the element itself. Btw, look up "event delegation" on Google. The answer is kinda long, I hope it helps you learn something rather than just anwsers – Lance Dec 09 '13 at 16:47
Thanks for the explaination. its interesting how you us the ev.preventDefault() in the function to delegate the default action of the click to js function while keep the url for alternative. interesting answer. I like it. – ey dee ey em Dec 09 '13 at 17:04

srquinn · Answer 5 · 2013-12-09T20:21:08.783

0

Check this working jsFiddle:

$(function () {
    $('.pagination li').on("click", function (e) {
        e.preventDefault();
        getPagnatedQs(this);
    });
});

function getPagnatedQs(element) {
    var User = {};
    User.page = $(element).children().text();
    console.log(User.page);
}

You had some jQuery selector issues.

edited Dec 09 '13 at 20:21

answered Dec 09 '13 at 14:47

srquinn

10,134
2
48
54

Replaced with `.text()` – srquinn Dec 09 '13 at 20:20

Pagination nested a tag value is not picked up by jQuery

Update

5 Answers5