1

このHTML構造は、CMSが原因で編集できません。ご覧のとおり、クラス/スパンがないため、アクティブなページ（「5」）のスタイルを設定するのが困難です。一方、最後のページ付けがアクティブになると、最後のシェブロンが削除されます。これは「7」です。

誰かがjqueryソリューションを提供して<span></span>、アクティブなときと最後のページ付けがアクティブなとき（「7」）に「5」をラップアラウンドできるので、スタイルを設定できますか？

  1. アクティブなページは、選択した数に応じて増減するため、スパンが必要なのは常に「5」および「7」になるとは限りません。
  2. jqueryは、同じdivブロック内に存在する要約「xxレコード/ページあたりxxレコード/xページ」に触れないようにする必要があります。
  3. 最後のページ付け（7）をクリックすると、シェブロンが削除され、アクティブな番号が要約の横に表示されます。この孤立したページネーションには、要約に影響を与えることなくスパンタグが必要になります。

これはデモを提供するための私のフィドルです：http：//jsfiddle.net/evanmoore/yay9W/

例1：

<div class="pag">
    <a class="prev" href="http://www.example.com">‹‹&lt;/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">››&lt;/a>
    xx records / xx records per page / x pages 
</div>

例2：最後のページ付けがアクティブな場合（この場合は7）、htmlは次のようになります。

<div class="pag">
    <a class="prev" href="http://www.example.com">‹‹&lt;/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>

これはデモを提供するための私のフィドルです：http：//jsfiddle.net/evanmoore/bqyYA/

4

2 に答える 2

3

最後のコンテンツ（要約を保持している）を除くテキストノードであるコンテンツをラップしたい場合、これは機能するはずです。

$('div.pag').contents(':not(:last-child)').filter(function() {
  return this.nodeType == 3;
})
.wrap('<span></span>')

.contents関数は.children関数に似ていますが、テキストノードも返す点が異なります。フィルタは、テキストノードタイプをチェックします。追加されたフィルターは、最後の子ノードをスキップします。

デモは次のとおりです。

http://jsfiddle.net/36Wwt/

于 2013-01-11T02:23:48.160 に答える
2

これはほとんどの場合に実行されます。

上記の解決策は、私がここに貼り付けたフィドルのマークアップなど、多くの場合機能しません

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

フィドルをチェック

于 2013-01-11T02:37:38.267 に答える