ループをカウントしてナンバリングする。

Question

前提・実現したいこと

WPでの人気記事ランキングをプラグインで行っており順位をつけようとjQueryでナンバリングをしたいのですが
上手くいきません。

<?php if (function_exists('wpp_get_mostpopular')) {
 $arg = array (
  'range' => 'weekly',//集計する期間（weekly,monthly,all）
  'order_by' => 'views',//閲覧数で集計（comments（コメント数で集計）,avg（1日の平均で集計））
  'post_type' => 'post',//ポストタイプを指定（post,page,カスタムポスト名）
  'stats_comments' => '1',//コメント数表示（1 or 0）
  'limit' => 12, //表示数
  'stats_views' => 1,//閲覧数表示（1 or 0）
  'thumbnail_width' => '245',//サムネイルの幅
  'thumbnail_height' => '345',//サムネイルの高さ
  'wpp_start'         => '<div class="row">',
  'wpp_end'           => '</div>', 
  'post_html' => '
<div class="col-sm-6 col-md-4 col-lg-4" id="divCount">
  <div class="well well-sm">
   <a href="{url}">
    <div class="thumb-overlay">
     <img src="{thumb_url}" alt="{text_title}" class="img-responsive">
    </div>
     <span class="post-title title-truncate m-t-5">{text_title}</span>
   </a>
     <div class="post-added">順位：<span class="cnt"></span></div>
     <div class="post-views pull-left">閲覧数：{views}</div>
     <div class="clearfix"></div>
  </div>
 </div>
' );
 wpp_get_mostpopular($arg);
 }
endif; ?>

行いたい事は<div class="***" id="divCount">でループカウントを取り<span class="cnt"></span>にカウント数を表示させ
順位としたいと思っています。

[ループ]

<div class="col-sm-6 col-md-4 col-lg-4" id="divCount"> <div class="well well-sm"> <a href="{url}"> <div class="thumb-overlay"> <img src="{thumb_url}" alt="{text_title}" class="img-responsive"> </div> <span class="post-title title-truncate m-t-5">{text_title}</span> </a> <div class="post-added">順位：<span class="cnt">[カウント数]</span></div> <div class="post-views pull-left">閲覧数：{views}</div> <div class="clearfix"></div> </div> </div> [ループ]

上記がループするhtmlタグになります。
固定ページ（page-hoge.php）に直接 wp popular posts のコードを書き表示させています。

発生している問題・エラーメッセージ

Uncaught SyntaxError: missing ) after argument list

該当のソースコード

<script type="text/javascript">
jQuery(document).ready(function($){
  $("#divCount div").each(function (i) {
    i = i+1;
    $(this).prepend('<span class="cnt">#'i'</span>');
   });
});
</script>

補足情報

Wordpress 4.9
WordPress Popular Posts 4.0.13
php5.6

Comments

[m.ts10806]

結局どのように解決されたのでしょうか？　https://teratail.com/help/question-tips#questionTips4-2

Answer 1

エラー解消だけなら以下

$(this).prepend('<span class="cnt">#'i'</span>');

↓

$(this).prepend('<span class="cnt">#'+i+'</span>');

• JavaScriptの文字列で「連結・結合(+, joinなど)」を極めるコツ！

ただ、あえてJavaScriptで後でつけなおすのはどうしてでしょうか？
PHPだけで完結できそうに思いますが。

Comments

[OukaMutu]

アドバイスを頂き有難うございます。
エラーは解消されましたが意図したものにはならず解決には至らず頭を抱えております。
デザイン上、<ol>＜/ol><ul>＜/ul>等のリストタグが使えないのでcssでのナンバリングも
使えず、PHPの知識も乏しいので現状、八方塞がり状態です。

[m.ts10806]

おそらくそうではないかと思います。
画面表示時に出すのであればPHP側でナンバリングをして画面出力された方が良いですね。
どのように出したいのか、htmlで書けますか？（もしくは現在の画面からどのように出したいかを図示するのでも良いです）質問に追記してください。

Answer 2

$(this).prepend('<span class="cnt">#' + i + '</span>'); じゃなく？

Comments

[OukaMutu]

無事にエラーは解消されましたが意図していたものにはならず更なる深みにハマってしまいました。
回答して頂き有難うございます。