@jpn20180730 (岡﨑信司)posted at 2020-12-24

「text()」メソッドで取り出した文字列を<li>で囲みたい

Q&A

Closed

PHP JavaScript WordPress jQuery

解決したいこと

WordPressを利用して複数のチェックボックスのチェックを入れたら、チェックしたそれぞれの項目を別の場所に出力したいと思っています。

以下のコードで文字列は取得できたのですが、

タグなどで囲んで出力するにはどのようにすれば良いでしょうか？

<script>
$(function() {
  $('input[name="cat[]"]').change(function() {
    // 空の配列
    var cats = [];
    // チェックが入ったらループ処理
    $('input[name="cat[]"]:checked').each(function() {
      // 値を配列に格納
      cats.push($(this).parent('label').text());
    });
    // 配列を表示
    $('出力場所').text(cats);
  });
});
</script>

上記で出力できる内容

取得文字1,取得文字2,取得文字3

希望する出力形式

<li>取得文字1</li>
<li>取得文字2</li>
<li>取得文字3</li>

知識不足の為、htmlを組み合わせて出力する方法がわかりません。

どなたかご教授いただければ幸いです。

よろしくお願い致します。

1Answer

@harmless_3d6 posted at 2020-12-24

配列catsが生成されてるなら、
そこからhtmlを作成して入れればOKかと。
勘ですけど、こんな感じでどうでしょう？

// ▼ここを
$('出力場所').text(cats);

// こう変えたり
// 1. htmlを作成する
var temp_html = cats.map( cat => '<li>' + cat + '</li>' ).join("");
// 2. htmlを代入する
$('出力場所').html(temp_html);

0Like

Comments

@jpn20180730
Questioner
できました！！

本当にありがとうございます。

どうしても出力されるものをひとくくりに<li>タグで囲まれるようにしかならず四苦八苦しておりました。

グループとしてcatsが取得できるようなので、個別でcatを出力できればと思っていましたが、いかんせん基礎知識が足りずできずにいました。

本当に感動です。

ありがとうございました。

Are you sure you want to delete the question?

「text()」メソッドで取り出した文字列を<li>で囲みたい

解決したいこと

1Answer

Comments

Your answer might help someone💌