[英]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'. 由于我们的CMS,我具有无法编辑的HTML结构,并且您可以看到它缺少类/跨度,因此很难为活动页面设置样式,即“ 5”。 Meanwhile, the end chevron is removed when the last pagination is active, which is the '7'.
同时,当最后一个分页处于活动状态(即“ 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? 有人可以提供一个jquery解决方案来在
<span></span>
处于活动状态和最后一个分页处于活动状态(即'7')时将其包裹在'5'周围吗?
This is my fiddle to provide a demo: http://jsfiddle.net/evanmoore/yay9W/ 这是我提供演示的小提琴: http : //jsfiddle.net/evanmoore/yay9W/
Example 1: 范例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: 示例2:如果最后一个分页处于活动状态(在本例中为7),则html如下所示:
<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/ 这是我提供演示的小提琴: http : //jsfiddle.net/evanmoore/bqyYA/
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. .contents函数类似于.children函数,除了它还返回文本节点。 The filter checks for a text node type.
过滤器检查文本节点类型。 An added filter skips the final child node.
添加的过滤器将跳过最终的子节点。
Here's the demo: 这是演示:
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>');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.