flexboxを使ってカテゴリ別一覧を作成したい。justify-content: center;で一番下の行だけ左寄せ

Question

ワードプレスで、カテゴリ別の一覧を作っています。

flexboxを使い、親パネルと子パネルを作成しました。
親パネルに　justify-content: center;で横幅可変です。メディアクエリを使用しました。
そうすると、一番下の行が、カラム数により縦に揃いません。なのでその時に横並びに足りない分の空の子パネルを挿入したいです。

・CSS
/* 親パネル */
.p_list {
display: flex;
flex-flow: row wrap;
justify-content: center;
}

/** 空の子パネル **/
.clist.is-empty {
height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}

@media only screen and (max-width: 2500px) {
.clist{
width : 16%;
margin : 1%;
}
}
@media only screen and (max-width: 1600px) {
.clist {
width : 19%;
margin : 1%;
}
}
・
・
・

・JS
jQuery(function($){
var $ml_cnt = $('.p_list'),
emptyCells = [],
i;

for (i = 0; i < $ml_cnt.find('.clist').length; i++) {
	emptyCells.push($("<div class = 'clist'><div class = 'clist.is-empty'></div></div>"));
}
$ml_cnt.append(emptyCells);
}

);

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

Uncaught TypeError: $ is not a function
at HTMLDocument.<anonymous> (merchantslist.js:15)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)
(anonymous) @ merchantslist.js:15
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2

２０年以上前に少しパソコンを触っていた程度で、このような高度なことをやっていいのかわからないのですが、エラーをどう解決すれば良いものかわからず。。
一日、インターネットとにらめっこをしてみたのですが、解決に至りませんでした。
足りない情報などありましたらすみません。
どなたかお力を貸していただけましたら幸いです

Comments

[kei344]

（質問文は編集できます）質問文のjs/CSS/エラーはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

エラー内容は、
$は関数じゃないよ　です。
本件のJavaScript構文では、jQueryという、JavaScriptを使いやすくしたライブラリを使うよう書かれているようなので、
この構文を実行する前の行で、jQueryを読み込む必要があります。
（jQueryを読み込めば、$をjQuery関数として扱えます。）

Comments

[jessy]

早速のお返事ありがとうございました。
結局、その後も他のエラーが出てしまい、右往左往いたしましたが、なんとか解決にたどり着きました。
とても助かりました。
ありがとうございます。