Question

我有这个分页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>

这是我的jQuery代码：

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

我无法弄清楚为什么我无法获取数字1~5的li的值。我也试过.pagination ul li也没有工作。

更新

我只想提一下，拾取的值将用作客户端js中的数值计算。用.html取的那个没用。

Answer 1

如果您想要所选链接的文本值，可以通过将功能更改为

来获取

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

Answer 2

编辑：

这是JS FIDDLE：http://jsfiddle.net/KA72x/16/

使用...

<强> 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);
});

Answer 3

您可以尝试以下方式：

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

我根本无法让你的代码工作，所以我更改了初始选择器，以便找到在.pagination类的元素中找到的锚标签。

第一个选项显示如何获取单击元素的索引。第二个将为您提供锚标记的文本。您使用哪一个取决于您尝试使用User.page做什么。但是使用page之类的名称，似乎索引更合适。

Answer 4

包含实际页面网址是一个很好的做法，因此它会优雅地降级：

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

有几种方法可以通过URL或文本提取页码，并使用事件委派来缩小内存占用量：

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

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

Answer 5

检查此工作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);
}

你有一些jQuery选择器问题。

分页嵌套标记值不是由jQuery拾取的

更新

5 个答案: