投稿2018/08/30 16:12
編集2018/08/30 16:17親子関係を持つとき、子供がいる場合を判別して.append()するにはどうしたらいいでしょうか？
下記HTMLでは、子供がいない「Aさん、Dさん、Hさん、Iさん」には.append()したくないということです。
html
1<div> 2<ul> 3 4 <li> 5 <div>Aさん(親)<span class="num">1</span><span class="parent-num">0</span></div> 6 </li> 7 8 <li> 9 <div>Bさん(親)<span class="num">2</span><span class="parent-num">0</span></div> 10 <ul class="childrens"> 11 <li> 12 <div>Cさん(子)<span class="num">2.1</span><span class="parent-num">2</span></div> 13 </li> 14 <li> 15 <div>Dさん(孫)<span class="num">2.1.1</span><span class="parent-num">2.1</span></div> 16 </li> 17 <li> 18 <div>Eさん(子)<span class="num">2.2</span><span class="parent-num">2</span></div> 19 </li> 20 <li> 21 <div>Fさん(孫)<span class="num">2.2.1</span><span class="parent-num">2.2</span></div> 22 </li> 23 <li> 24 <div>Gさん(ひ孫)<span class="num">2.2.1.1</span><span class="parent-num">2.2.1</span></div> 25 </li> 26 <li> 27 <div>Hさん(孫)<span class="num">2.2.2</span><span class="parent-num">2.2</span></div> 28 </li> 29 </ul> 30 </li> 31 32 <li> 33 <div>Iさん(親)<span class="num">3</span><span class="parent-num">0</span></div> 34 </li> 35 36</ul> 37</div>
わかりにくい構造ですが、「Bさん」の子供とは、Bさんの.numの値を、.parent-numとして持っている「Cさん、Eさん」になります。
試しに書いたjQeuryですが、全てに.append()されてしまいます。
jQuery
1$(".childrens li").each(function() { 2 3 var myNum = $(this).find('.num').text(); 4 if( $('.parent-num:contains('+myNum+')') ){ 5 $(this).append('↑彼には子供がいます'); 6 } 7 8}); 9
JSfidleのサンプルです。
https://jsfiddle.net/4hodcm05/
HTMLを変えることなく判別したいと思っているのですが、どなたかできますか？
（ピリオドの数による判別は無しです。実際はピリオドなし番号なので。）
回答2件
0
jQuery
1$('.num').each(function(index, element) { 2 if ($('.parent-num').contents().filter(function() { return this.nodeValue === element.textContent; }).length) { 3 $(this).closest('div').after('↑彼には子供がいます'); 4 } 5});
投稿2018/08/31 01:46
総合スコア13749
0
ベストアンサー
こんにちは。
以下のようにif条件を修正すると、いかがでしょうか？
修正前：
javascript
1if( $('.parent-num:contains('+myNum+')') ){
修正後：
javascript
1if( $('.parent-num:contains('+myNum+')').length ){
サンプル： https://jsfiddle.net/jun68ykt/txcsLd73/1/
要点としては、 $(何らかのセレクタ) に該当する要素がなくても、if の条件の中でこれを使って、if($(何らかのセレクタ)) とすると、 $(何らかのセレクタ) は true に評価されてしまって、意図した判定にはならないことです。
なので、「該当するものがある」という条件を書きたい場合は、 lengthプロパティが 0 ではないことによって判定します。
補足すると、以下のように、長さが0の配列も true として扱われます。
shell
1$ node -v 2v10.8.0 3$ node 4> Boolean([]) 5true 6> if([]) console.log('hello'); 7hello 8undefined 9>
以上、参考になれば幸いです。
追伸
こんにちは。
だいぶ時間が経ってしまいましたが、その後も機能追加などの作業が続いていらっしゃるご様子ですね。
さて、次の 1. と 2. について回答します。
https://jsfiddle.net/psn5849w/97/
を拝見して、どのようなロジックで動いているかもだいたい把握しました。その上で指摘させて頂きたい点は以下です。（1)と（２）は細かいツッコミですが、 (3)はこのままだと不具合が起こる気がする点です。
<ul class="childrens"> の childrens は、末尾の s が不要なので削除し children とする。
配列に何か特定の要素が含まれるかの判定には、 indexOf ではなく、 includes を使う。
修正前：
javascript
1if (parents.indexOf(my_post_num) >= 0){
修正後：
javascript
1if (parents.includes(my_post_num)){
closeがクリックされたときの閉じる子要素の判定に使う正規表現の修正
修正前：
javascript
1var child_ancestor_num = click_ancestor_num+'-'+click_post_num;
修正後：
javascript
1var child_ancestor_num_pattern = new RegExp(`^${click_ancestor_num}-${click_post_num}(-\d+)*$`);
として、以下のようにチェックする。
javascript
1if (ancestor_num.match(child_ancestor_num_pattern)){
修正前だと、もし child_ancestor_num がたとえば "0-111-222" で、 ancestor_num が "0-10-111-2229-76"のとき、以下の判定
javascript
1"0-10-111-2229-76".match("0-111-222");
はマッチしてしまうので意図しない動作を引き起こす原因になります。修正後のように正規表現を作ることでこれを避けられます。
コメントが削除された場合、再帰になっているせいで「親が削除されて見つからない」→「too much recursionエラー！」になってしまうのです。
なるほどですね。おそらく このコード は、
教えて頂いたり拾ったりしたコードを一晩中切って貼ってを繰り返した
とあったとおり、力作ではあるのでしょうから、なんとかしたいお気持ちも分かります。しかし、ある投稿（post)が削除される可能性があり、これに対応しようとするとエラーになってしまったという状況は、私からすると、2018/09/01 01:22 のコメントに書いた、【パターン：あ】を使うことへの所感：
・・・・・ 直感として思うのは、
「慎重に書かないとバグのあるコードを書いてしまいそう」
に当てはまる事態であったりします。
つまり、分かり易くいえば、もし仮に、私と貴殿が同じ職場で働く同僚であったならば、
「ほらみろｗ だから、【パターン：あ】 は辞めとけっていったのに〜ｗ」
と、（心の中で、そっと） disるかもしれないなあ、ということですね。
ツリーを構成する各ノードの親子関係の操作だとか、ノードの削除、移動などを自分で書くとアルゴリズムの勉強になりますし楽しかったりもするのでハマる気持ちも分かりますが、これがもし何らかの製品として本番サーバーに載せるサービスの一部であるなら、こういうツリー操作はまさにDOM操作のお家芸ですから、先達のプログラマーの成果に乗っかった方が良い気がします。（つまり、投稿の親子関係をDOMの親子関係に乗せた【パターン：い】を採用するということですね。）
さらにより賢明なのは、ツリーの基礎となるグラフ理論の初歩をかじったり、ツリーのノードを一番上から下へ、あるいは、末端のノードから上へ再帰でたどるコードを自分で書いたり、他の人のコードを読んだりして、「やろうと思えば自分で書ける」と思えるだけのプログラミング力はキープしつつ、明らかに先達の作ったコードに乗っかった方がよいときは思いっきり乗っかって楽をして、自分はもっと別の重要なコードを書く方に時間をあてる、みたいな姿勢かなと思います。
とはいえ、明らかに大変なのに、【パターン：あ】に猪突猛進した貴殿の勢い、嫌いではありません。
追伸2
Q&Amy_ancestor_num などの属性に、ハイフン区切りの文字列で持たせると何かと大変そうなので、投稿ツリーをDOMとは別の場所に、ツリーを保持したデータ構造によって、 持っておくほうがよいのでは？と（無責任な思いつきですが、）思ったりもします。
追伸3
いずれにせよ、ここから先は、バックエンドの投稿テーブルの作り方だったり、サーバーサイドでどこまで画面がレンダリングされてきて、どこから先をフロントエンドでやるのか？ みたいな詳細に突っ込まないと正確なコメントはできなさそうです。
頑張ってください！
投稿2018/08/30 17:19
編集2018/09/24 12:06
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/03 08:43