質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

140閲覧

JSで配列の比較で躓いています

skipping

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/02 15:11

//➁子がいたら「子持ちです」を表示

したいのですが、配列の比較がうまくいかず、思うように表示されません。

コードが長いのでサンプルをご覧下さい。
サンプル:https://jsfiddle.net/psn5849w/

上のサンプルのコードは下記になります。

html

1<p>自分の番号</p><p>祖先の番号</p> 2 3<div class="alllists"> 4 <ul> 5 6 <li> 7 <div id="post-7" class="list" parent="0" ancestor="">X家 8 <span class="my_num">4</span><span class="ancestor_num"></span> 9 </div> 10 <ul class="childrens"> 11 <li> 12 <div id="post-39" class="list" parent="7" ancestor="">A 13 <span class="my_num">4</span><span class="ancestor_num"></span> 14 </div> 15 </li> 16 </ul> 17 </li> 18 19 <li> 20 <div id="post-151" class="list" parent="0" ancestor="">Y家 21 <span class="my_num">4</span><span class="ancestor_num"></span> 22 </div> 23 <ul class="childrens"> 24 <li> 25 <div id="post-200" class="list" parent="151" ancestor="">B 26 <span class="my_num">4</span><span class="ancestor_num"></span> 27 </div> 28 </li> 29 <li> 30 <div id="post-354" class="list" parent="151" ancestor="">C 31 <span class="my_num">4</span><span class="ancestor_num"></span> 32 </div> 33 </li> 34 <li> 35 <div id="post-365" class="list" parent="354" ancestor="">D(Cの子) 36 <span class="my_num">4</span><span class="ancestor_num"></span> 37 </div> 38 </li> 39 <li> 40 <div id="post-503" class="list" parent="365" ancestor="">E(Dの子) 41 <span class="my_num">4</span><span class="ancestor_num"></span> 42 </div> 43 </li> 44 <li> 45 <div id="post-514" class="list" parent="503" ancestor="">F(Eの子) 46 <span class="my_num">4</span><span class="ancestor_num"></span> 47 </div> 48 </li> 49 </ul> 50 </li> 51 52 <li> 53 <div id="post-705" class="list" parent="0" ancestor="">Z家 54 <span class="my_num">4</span><span class="ancestor_num"></span> 55 </div> 56 </li> 57 58 </ul> 59</div>

jQeery

1//➀先祖番号の連結 2function getParentNums(list) { 3 var parent_num = list.attr('parent'); 4 if (parent_num == "0") { 5 return ["0"]; 6 } 7 var parent = $("#post-" + parent_num); 8 var parent_nums = getParentNums(parent); 9 parent_nums.push(parent_num); 10 return parent_nums; 11} 12$('.list').each(function() { 13 var my_num = $(this).attr('id').split('-')[1]; 14 var list = $(this); 15 var parents = getParentNums(list); 16 var ancestor_num = parents.join('-'); 17 list.attr('ancestor',ancestor_num); 18 19 //確認のための表示 20 $(this).find('.my_num').text(my_num); 21 $(this).find('.ancestor_num').text(ancestor_num); 22 23}); 24 25 26//➁子がいたら「子持ちです」を表示 27$(".list").each(function() { 28 var my_num = $(this).attr('id').split('-')[1]; 29 var parent_num = $(this).attr('parent'); 30 var child_num = parent_num+'-'+my_num; 31 var arr = []; 32 arr.push( child_num ); 33 if (arr.indexOf(my_num) >= 0){ 34 $(this).append('子持ちです'); 35 } 36}); 37

上のコメントアウトのように

//➁子がいたら「子持ちです」を表示

ができない状態です。

簡単な説明も添えて頂けたら嬉しく思い、こちらで質問させて頂きました。

どうぞ宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

skipping

2018/09/03 08:42

その説はお世話になりました。頂戴したコードは高度で解読できず、HTMLが変わった今回の場合に適用させられませんでした。
guest

回答1

0

ベストアンサー

//➁子がいたら「子持ちです」を表示
$(".list").each(function() {
var my_num = $(this).attr('id').split('-')[1];
var parent_num = $(this).attr('parent');
var child_num = parent_num+'-'+my_num;
var arr = [];
arr.push( child_num );
if (arr.indexOf(my_num) >= 0){
$(this).append('子持ちです');
}

});

  1. このコードだと、eachの1周ごとに新しい配列が宣言されているので、配列には1つのchild_numしか入りません。
  2. array.indexOfは配列内に引数で与えたものと一致するものがあればその配列番号を返すメソッドです
  3. 1周だけだと、child_numのリストが出揃う前に「子持ちです」追加判定が来てしまう

ですので以下のように書けば望んでいる動きをしてくれると思います。

//親のnumリストの初期宣言 var parents = []; // 親のnumリストを作成する $(".list").each(function() { var parent_num = $(this).attr('parent'); parents.push( parent_num ); }); //親のnumリストに自分のnumがある場合、子持ちを表示 $(".list").each(function() { var my_num = $(this).attr('id').split('-')[1]; if (parents.indexOf(my_num) >= 0){ $(this).append('子持ちです'); } });

投稿2018/09/03 05:35

iidzuka

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

skipping

2018/09/03 08:41

ありがとうございます。とてもよくわかりました。次からはうまくできそうです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問