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

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

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

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

jQuery

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

Q&A

解決済

1回答

191閲覧

配列を比較し、文字列を連結するjavascriptについて

skipping

総合スコア14

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/08/31 16:23

親の「.parent_num」を、自分の「.parent_num」の前に繋げたいです。

つまり、以下のHTMLでコメントアウトしてある変化をJSで起こしたいということになります。

ただし、その変化は「.childrens」の中だけで起こし、Aさんは親であるY家の「.parent_num」を、自分の「.parent_num」の前に繋げません。

html

1<li> 2 <div>Y家 3 <span class="num">100</span> 4 <span class="parent_num">0</span> 5 </div> 6 <ul class="childrens"> 7 <li> 8 <div>Aさん(家長) 9 <span class="num">101</span> 10 <span class="parent_num">100</span> 11 </div> 12 </li> 13 <li> 14 <div>Bさん(Aの子) 15 <span class="num">102</span> 16 <span class="parent_num">101</span> 17 <!-- parent_numをJSで「100-101」にしたい --> 18 </div> 19 </li> 20 <li> 21 <div>Cさん(Aの子) 22 <span class="num">103</span> 23 <span class="parent_num">101</span> 24 <!-- parent_numをJSで「100-101」にしたい --> 25 </div> 26 </li> 27 <li> 28 <div>Dさん(Cの子) 29 <span class="num">104</span> 30 <span class="parent_num">103</span> 31 <!-- parent_numをJSで「100-101-103」にしたい --> 32 </div> 33 </li> 34 </ul> 35</li>

そのためにこんなjQueryを考えてみたのですが、まるで歯が立たず、思うようにできません。
方法がわかる方がいたらご指導下さい。

jQuery

1//全てのnumを配列に入れる 2var arr=[]; 3$(".num").each(function() { 4 arr.push($(this).text()); 5}); 6 7//全てのparent_numの中で 8$(".parent_num").each(function() { 9 //自分のnumと同じ値だったら、自分の値の前に「親のparent_num」と「-」を付ける。 10 var myNum = $(this).consest('div').find('.num').text(); 11 var parentNum = 12 if (arr == myNum) { 13 $(this).prepend( parentNum + '-' ); 14 } 15}); 16

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

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

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

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

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

kei344

2018/08/31 17:03

「家」のparent_numは必ず「0」なのでしょうか。
skipping

2018/08/31 17:06 編集

はい。他の家もあり、いずれも「parent_num」は「0」です。ただし「num」はどの家も違っていて全て固有の数字です。桁数もバラバラです。
guest

回答1

0

ベストアンサー

JavaScript

1$( '.childrens' ).each( function() { 2 var $_t = $( this ); 3 var f_num = $_t.prev().find( '.num' ).text(); 4 $_t.find( '.parent_num' ).each( function() { 5 var p_num = $( this ).text(); 6 if ( f_num != p_num ) { 7 $( this ).text( f_num + '-' + p_num ); 8 } 9 } ); 10} ); 11```**動くサンプル:**[https://jsfiddle.net/vzhjs3ad/](https://jsfiddle.net/vzhjs3ad/) 12 13--- 14 15**追記:** 16 17 18そもそもHTMLの構造とデータの構造が乖離するので、そこから修正されるほうがよいですが。 19```JavaScript 20$( '.num, .parent_num' ).each( function() { 21 var $_t = $( this ); 22 var c_name = $_t.hasClass( 'num' ) ? 'num' : 'parent_num'; 23 $_t.attr( 'data-' + c_name, $_t.text() ); 24} ); 25$( '.childrens' ).each( function() { 26 var $_t = $( this ); 27 var f_num = $_t.prev().find( '.num' ).text(); 28 $_t.find( '.parent_num' ).each( function() { 29 var p_num = $( this ).attr( 'data-parent_num' ); 30 if ( f_num == p_num ) return; 31 var parent_num = 'xyz'; 32 var res_num = [ p_num ]; 33 while ( parent_num ) { 34 parent_num = $_t.find( '[data-num="' + res_num[ 0 ] + '"]' ).first().next().attr( 'data-parent_num' ); 35 res_num.unshift( parent_num ); 36 } 37 $( this ).text( res_num.join( '-' ) ); 38 } ); 39} ); 40 41```**動くサンプル:**[https://jsfiddle.net/vzhjs3ad/1/](https://jsfiddle.net/vzhjs3ad/1/)

投稿2018/08/31 17:17

編集2018/09/01 06:27
kei344

総合スコア69366

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

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

skipping

2018/08/31 19:10 編集

素早いご回答誠にありがとうございます。 ただ残念ながら、Dさんは「100-101-103」にしたいのですが、「100-103」になっておりました。 祖先の番号は全て連結させたいのです。 とはいえ良いコードをありがとうございます。
skipping

2018/08/31 19:12 編集

尚、なぜそのような連結が必要かと申せば、当質問の目的がこちら(https://jsfiddle.net/xzpunwh1/1/)のスライダーの、開閉機能を改良することにあるためです。 すなわち、現状では「Aさん」→「Cさん」とopneして「Dさん」を開いた後に、「Aさん」をcloseしても、孫にあたる「Dさん」が閉じられません。 そこで、祖先の番号を全て連結させておくことによって、閉じる対象として認識させようという目論見があったのです。 実際にもし、Dさんが「100-101-103」になっていれば、「Aさん」をcloseしたときに「Dさん」も閉じられるはずですよね。そのための先祖の番号の全ての連結でした。 また良い知見がございましたら是非、お知らせ下さいませ。 長文にて失礼致しました。
skipping

2018/09/01 07:55

ご修正ありがとうございます。頂いたコードを元に奮闘していたので本当に助かります。 ただ残念ながら、Dさんは「100-101-103」にしたいのですが、「-100-101-103」になっておりました。 直すために $( this ).text( res_num.join( '-' ) ); を var joining = $( this ).text( res_num.join( '-' ) ); var joiningSlice = joining.slice( -1 ); $( this ).text(joiningSlice); としてみたのですが、巧くいかず、それ以前で何とかするしかなさそうですが、複雑でついていけません…。
skipping

2018/09/01 08:02 編集

ところで、「そもそもHTMLの構造とデータの構造が乖離する」についてですが、WordPressのコメント欄ではこのようになります。返信階層(子供階層)の設定が10までと制限されていて、それ以上は同じ階層になってしまうのです。そこで初めから返信階層を2までに設定しておき、番号の連結によって親子関係を何階層まででも持たせよう。というのが今回質問した意図です。ご指摘頂いた構造の乖離ですが、この場合でも問題ありでしょうか?(とすると、そもそもwordpressの設定が10階層までに制限されているのはなぜ?と疑問です。)
skipping

2018/09/02 02:00

お手数おかけしました。高度ですね。どうもありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問