each()の中で、for文を実行すると、each分だけ余計にループされる

以下に、サンプルコードを記載します。

json
1[
2    {
3        "name": "hoge",
4        "id": 1,
5    },
6    {
7        "name": "foo",
8        "id": 0,
9    },
10    {
11        "name": "fuge",
12        "id": 1,
13    },
14]

HTML
1<html>
2<p class="text">hoge</p>
3<p class="text">foo</p>
4<p class="text">fuge</p>
5</html>
6
7<script>
8$(".text").each(function(index) {
9  var text = $(this).text();
10  for(var i = 0;i < hoge.length; i++) {
11    var name = hoge[i].name;　///hogeは$.ajaxの第一引数（jsonの配列を取ってくる想定）
12    if(name === text && id === 0) {
13      $(this).hide();
14    }
15  }
16}
17</script>

上記スクリプトだと、「eachの中に、forがあるため
$('.text')のかず分、forが余計にループしてしまう」のですが、改善策を教えていただきたいです。

think49

2019/06/04 03:50

https://teratail.com/questions/192778 https://teratail.com/help#posted-otherservice マルチポストですね。解決法はマルチポスト先にコードがありました。

frtne

2019/06/04 14:52

リンクありがとうございます。こちら修正致しました。

think49

2019/06/04 23:21

https://teratail.com/help#posted-otherservice 「やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。」

行動規範の内容に同意します

回答4件

このコードに限って言えば、idが0のものしか必要がないので、余分なものを刈ってしまえばループの回数は減ると思います。

js
1hoge = hoge.filter( function(e){ return e.id==0 });

nameプロパティがユニークであれば、また別の手段がありそうです。

投稿2019/06/03 13:34

Lhankor_Mhy

総合スコア36074

frtne

2019/06/03 14:23

ご回答ありがとうございます！

行動規範の内容に同意します

いろいろ気になる点があります。

まず、「forが余計にループしてしまう」とありますが、余計かどうかは状況依存です。HTML上の順番とhogeの順番が一致することが保証されない場合、二重ループで全部の組み合わせを照合するほうが適切になります。
id === 0とありますが、JSONの中身は文字列なので、絶対に一致しません。

投稿2019/06/03 11:52

maisumakun

総合スコア145183

frtne

2019/06/03 12:03 編集

早速のご回答ありがとうございます。＞＞・まず、「forが余計にループしてしまう」とありますが、余計かどうかは状況依存です。HTML上の順番とhogeの順番が一致することが保証されない場合、二重ループで全部の組み合わせを照合するほうが適切になります。 →HTML上の順番とhogeの順番　＝　HTMLとjsonの順番ということでしょうか？つまり今回のようなHTMLと、jsonファイルで順番が同じと保証されない場合は、この書き方で良いということでしょうか＞＞id === 0とありますが、JSONの中身は文字列なので、絶対に一致しません。 →こちら誤りです。修正しました。

行動規範の内容に同意します

ベストアンサー

こちらに来ました????????

frtneさんの意図を理解、致しました。

jsonデータ数とp数が違った場合、例えば、

json配列のデータ数 * p要素数
        10    * 2

の際、forループを使って全部回すのかどうか。

別案として、以下のコードの様に、先にjson配列からid===0のオブジェクトだけ取り出す(filter())する方法があります。

ただ、forループも使い全回しするか先にフィルターするか、どちらが最適なアルゴリズムかは、今の僕のレベルでは力量不足で明確に分かりません…すみません(´๑›ω‹๑)????

json配列内のデータ数とid === 0の数による…というのまでは、表(以下)にしてみて分かりました????

宜しければ参考までに使ってやって下さい???????? もしかしたら、他にもっといい方法が、あるかもしれません(他の回答者様宜しくお願い致します????????)

js
1"use strict";
2
3let filtered = hoge.filter(function (obj) {
4  return obj.id === 0;
5});
6
7
8$(".text").each(function (index) {
9   let text = $(this).text(),
10   _this = $(this);
11     
12   filtered.map(function (person) {
13      if (person.name === text) {
14         _this.hide();
15      }
16   });
17});

追記

もう少しスリムにまとめてみました。結果は同じです。
ES6の矢印関数(アロー関数)で書くと、よりスリムになります。

"use strict";

let hasId0 = function hasId0(obj) {
   return obj.id === 0;
};

$(".text").each(function (indx, elm){
   let txt = $(elm).text();
   
   hoge
      .filter(hasId0)
      .map(function (person){ /* arrayOf_hogeFiltered.map() */
         return person.name === txt ? elm : false; // ---(1)
      })
      .forEach(function (el){ /* arrayOf_DOMElementsMatchedPrev.forEach() ---(2) */
         return $(el).hide();
      });
});

/* 
---(1)
以下と同じ意味。
if( person.name === txt ){
   return elm;
}
*/

id===0	hoge.filter() + $.each() * filtered.map()		$.each() + for(){}
	ループ数		ループ数
3個の場合	3 + (3 * 3) = 12	>	9
2個	3 + (3 * 2) = 9	===	9
1個	3 + (3 * 1) = 6	<	9
0個	3 + (3 * 0) = 3	<	9

投稿2019/06/04 14:13

編集2019/06/07 11:07

退会済みユーザー

総合スコア0

frtne

2019/06/04 14:56

ありがとうございます！データの中身数≠p要素の場合例えばデータの中身数が10、p要素が2の場合は、配列を回しきれないので forを使わざるを得ないでしょうか

行動規範の内容に同意します

こんな感じですか？

javascript
1<script>
2$(function(){
3  var arr=[
4    {
5      "name": "hoge",
6      "id": 1,
7    },
8    {
9      "name": "bar",//.textに存在しない
10      "id": 0,
11    },
12    {
13      "name": "foo",
14      "id": 0,
15    },
16    {
17      "name": "fuge",
18      "id": 1,
19    },
20    ];
21  $('.text').filter(function(){
22    var name= $(this).text();
23    return (arr.filter(function(x){
24      return x.name==name;
25    })[0]||{id:1}).id==0;
26  }).hide();
27});
28</script>
29
30<p class="text">hoge</p>
31<p class="text">foo</p>
32<p class="text">fuge</p>
33<p class="text">piyo</p> <!--arrに存在しない-->