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

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

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

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

jQuery

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

Q&A

解決済

1回答

1436閲覧

連続する要素内で処理を行いたい

castail

総合スコア117

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2015/12/12 08:23

編集2015/12/13 03:09

連続する要素内で処理を行いたいです。

構成は以下の通りです。

lang

1 <div class="work-same box-default"> 2 <a href="XXXXXXXXXXXXXXXXXXXX.html" class="cassette-link"></a> 3 <div class="hoge content-wrap bg-default"> 4 <div class="hoge"> 5 <div class="hoge-img"> 6 <p class="hoge-img-inner"> <img class="img" src="YYYYYYYYYYYYYY.jpg" alt="999998_001"> </p> 7 </div> 8 <div class="hoge-inner content-wrap"> 9 <table class="tbe-vertical"> 10 <tbody> 11 <tr> 12 <th>1つ目のth</th> 13 <td>1つ目のtd</td> 14 </tr> 15 <tr> 16 <th>2つ目のth</th> 17 <td>2つ目のtd2つ目のtd<table></table></td> 18 </tr> 19 <tr> 20 <th>3つ目のth</th> 21 <td>3つ目のtd</td> 22 </tr> 23 <tr> 24 <th>4つ目のth</th> 25 <td>4つ目のtd</td> 26 </tr> 27 <tr> 28 <th>5つ目のth</th> 29 <td>5つ目のtd</td> 30 </tr> 31 <tr> 32 <th>6つ目のth</th> 33 <td>6つ目のtd</td> 34 </tr> 35 </tbody> 36 </table> 37 </div> 38 </div> 39 <div class="hoge"> 40 <p class="hoge-txt"></p> 41 <p class="hoge-action"> 42 <a href="YYYYYYYYYYYYYYYYYYYYYYYYYYYY.html" class="btn-link-primary"></a> 43 </p> 44 </div> 45 </div> 46 </div>

「.work-same」の構成が連続して出現し、その1つづつの内部で処理を変更したいです。
具体的には、大きく2点修正を加えたいです。

【1】「.content-wrap」直下の1つ目の「.hoge」全体を「.cassette-link」と同じURLのリンクで囲む

【2】「.tbe-vertical」内部の変更

(1)「tr:eq(4)」のth・tdを「tr:eq(2)」のtd直後に移動する

(2)「tr:eq(5)」のth・tdを「tr:eq(3)」のtd直後に移動する

(3)空になった「tr:eq(4)」「tr:eq(5)」を削除する

(4)「tr:eq(0)」「tr:eq(1)」のtdに「colspan="3"」を追加する

lang

1 <div class="work-same box-default"> 2 <a href="XXXXXXXXXXXXXXXXXXXX.html" class="cassette-link"></a> 3 <div class="hoge content-wrap bg-default"> 4 <a href="XXXXXXXXXXXXXXXXXXXX.html"> 5 <div class="hoge"> 6 <div class="hoge-img"> 7 <p class="hoge-img-inner"> <img class="img" src="YYYYYYYYYYYYYY.jpg" alt="999998_001"> </p> 8 </div> 9 <div class="hoge-inner content-wrap"> 10 <table class="tbe-vertical"> 11 <tbody> 12 <tr> 13 <th>1つ目のth</th> 14 <td colspan="3">1つ目のtd</td> 15 </tr> 16 <tr> 17 <th>2つ目のth</th> 18 <td colspan="3">2つ目のtd<table></table></td> 19 </tr> 20 <tr> 21 <th>3つ目のth</th> 22 <td>3つ目のtd</td> 23 <th>5つ目のth</th> 24 <td>5つ目のtd</td> 25 </tr> 26 <tr> 27 <th>4つ目のth</th> 28 <td>4つ目のtd</td> 29 <th>6つ目のth</th> 30 <td>6つ目のtd</td> 31 </tr> 32 </tbody> 33 </table> 34 </div> 35 </div> 36 </a> 37 <div class="hoge"> 38 <p class="hoge-txt"></p> 39 <p class="hoge-action"> 40 <a href="YYYYYYYYYYYYYYYYYYYYYYYYYYYY.html" class="btn-link-primary"></a> 41 </p> 42 </div> 43 </div> 44 </div>

過去に類似のご質問をしており、そちらを参考に色々トライしたのですが、今回構成が複雑でうまくいきませんでした。
https://teratail.com/questions/17622
https://teratail.com/questions/16181

何卒ご教授の程よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

朴直に書いてみるのである。
大して難しいことはしていないので読めるはず。

Javascript

1$hoge = $('.content-wrap > .hoge:first'); 2$a = $('<a>'); 3 4$a.attr('href', $('.cassette-link').attr('href')); 5 6$hoge.replaceWith($a); 7$a.append($hoge) 8 9$tr = $('.tbe-vertical tr'); 10$tr.each(function(i){ 11 switch(i){ 12 case 0: 13 case 1: 14 $tr.eq(i).children().last().attr('colspan', '3'); 15 break; 16 case 4: 17 case 5: 18 $tr.eq(i).children().appendTo($tr.eq(i-2)); 19 $tr.eq(i).remove(); 20 break; 21 } 22}); 23

追記:2015/12/13 14:27

解釈を違えていたようなので再編集。
work-same単位で処理していく。

Javascript

1 2$('.work-same').each(function(){ 3 4 var href = $('.cassette-link', this).attr('href'); 5 var $a = $('<a>').attr('href', href); 6 7 $('.bg-default', this).children().first().wrap($a); 8 9 var $tr = $('.tbe-vertical tr', this); 10 for(var i=$tr.length; i--;){ 11 switch ( i ){ 12 case 0: case 1: 13 $tr.eq(i).children('td').attr('colspan', '3'); 14 break; 15 case 4: case 5: 16 $tr.eq(i).children().appendTo($tr.eq(i-2)); 17 $tr.eq(i).remove(); 18 break; 19 } 20 } 21});

投稿2015/12/12 10:44

編集2015/12/13 05:30
nage

総合スコア144

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

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

castail

2015/12/13 03:10

ご回答ありがとうごいざます。 試してみたのですが、一つにしか適用されませんでした。 お伝えした通り上記構成は連続していくつも存在します。 ちなみに「.content-wrap」が連続すると記載しましたが、その内部にも同様のクラスが存在し混乱を招いている可能性もあるので、「.work-same」をベースにしました。 またthとtdの入れ替えですが、こちらも意図したところに挿入されませんでした。 ちなみに2つ目のtd内に別の<table>が入れ子になっているのですがそちらが影響しているかもしれません。 そちらの内容で上記依頼文を修正しました。 こちらのご説明がわかりずらく誠に申し訳ございませんが、この構成で改めてご教授願えませんでしょうか?
nage

2015/12/13 05:34

失礼しました。 回答に追記しました。
castail

2015/12/14 04:17

とんでもないです。当方の仕様変更に関わらずご丁寧に更なるご回答ありがとうごいざました。 ご教授いただいた内容で完璧に実現できました! 感謝いたします。 誠にありがとうごいざました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問