Question

我有来自ajax响应的分页列表。如何隐藏后面的页面并根据限制器显示分页。

如果限制器为5，则必须仅显示10个页面链接并隐藏以后的页面。

1 2 3 4 5 6 7 8 9 10 ..下一个

11 12 13 14 15 ..下一个

我试图从ajax响应中计算li的长度，但它没有显示计数。如何获得计数以及如何隐藏和显示以后的页面。

输出：

next_page_num: <li>1</li><li>2</li><li>3</li><li>5</li><li>6</li><li>7</li>..



  success: function(response){  
                $("#listing_products").html("");
                $("#listing_products").html(response.html_content);
                $("ul.pagination").html("");
                $("ul.pagination").html(response.next_page_num);

                if(page_limit==5){

                    var product_listing_count = response.next_page_num;



                    if($(product_listing_count).length>8){

//How to hide after 8th pages and hide later pages add next to 8th page

 ));

                    }               

                    $("ul.pagination").html("");
                    $("ul.pagination").html(response.next_page_num);

                }

Answer 1

我在其中使用

的香草JS解决方案

正则表达式
```
var regex = /<li[^>]*>\d+<\/li[^>]*>/g
```
这与<li>digits</li>
String.prototype.match，这使我得到了与上面的模式匹配的结果数组
Array.prototype.slice，这是我的前limitTo个项目（在本例中为5）
...Spread operator，这可以帮助我轻松地连接两个数组
最后是Array.prototype.join，它可以帮助我将数组恢复为字符串

工作解决方案：

var regex = /<li[^>]*>\d+<\/li[^>]*>/g
var product_listing_count = "<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li>"
var productListingAsArray = product_listing_count.match(regex);
var limitTo = 5;
var continuousDots = "<li>...</li>"
var nextItem = "<li>next</li>"
var resultingArray = [...productListingAsArray.slice(0,limitTo),continuousDots,nextItem];
console.log(resultingArray.join(""));

Answer 2

这是因为$.fn.find函数遍历元素的子节点，因此，如果没有像<ul>这样的父节点，就不会有子节点...

然后：

$('<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>')
    .find('li').length;

返回6

并且：

$('<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>')
    .find('li').length;

返回0

获取长度的一种简单方法是使用split/length：

'<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>'
    .split('<li>').length - 1; 
 //-1 because there will be always a empty entry in the array

返回6

或者像Adelin一样，请使用RegExp：

 '<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>'
      .match(/(<li>)/g).length

返回6

如何隐藏后面的页面并在jquery ajax响应中显示分页？

2 个答案: