jqueryで特定の要素をdivで囲う

前へ 次へ
このQ&Aのポイント
  • jqueryを使ってHTMLの特定の要素をdivで囲む方法を教えてください。
  • 試しにwrapAllを使用してみたのですがうまくいきませんでした。
  • どのように実装すれば要素を正しく囲むことができるのでしょうか？
回答を見る
  • ベストアンサー

jqueryで特定の要素をdivで囲う

jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

jQuery 使うほどではないと思うのだけれど、無理くり１行で済む。 Array.from (document.querySelectorAll ('h2+ul+ul.spAcodNav')).forEach (e => e.parentNode.insertBefore (document.createElement ('div'), e).appendChild (e).parentNode.className = 'wrap');

yama-maron
質問者

お礼

babu_baboo様 度々のご回答をありがとうございます。 私の方でjQueryを使って対応することができたのですが、無理やり感がすごく、また行数も多くなってしまいましたので、後ほどご参考にさせていただきつつ、上手く組み込めればご使用させていただきたいと思います。 jQueryを使わずに1行で、とのことで大変勉強になりました。 具体的な解決案をご提示いただきまして、ありがとうございます。

その他の回答 (1)

回答No.1

<li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> その前に構造がおかしい "</ul>" が余計と "</div>"が不足。

yama-maron
質問者

お礼

babu_baboo様 早速のご回答をありがとうございます。 ご指摘いただきました箇所ですが、正しくは以下のとおりでした。 <ul class="spAcodNav"> <li class=""> <a href="#tab02-1"><span class="eqChildLink">全体</span></a> </li> </ul> ご指摘をどうもありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jquery教えて下さい。

    現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか？ 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>

  • Jquery タブで、４つのliのうち、ひとつだけ除外

    お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？

  • jQueryタブメニュー内へのリンク方法。

    javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。

  • div要素をランダムに表示させたい

    お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }

  • カテゴリページ内　複数タブ

    wordpressでサイト作っています idの番号を変えることで１ページ内に#numの連番で複数タブを置ける様にはしたのですが、 while文のなかで番号に連番を振るやり方がわかりません。 初心者ですいませんが、よろしくお願いします <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ … <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html>

  • div　展開方法

    こんにちは、 divの展開方法についてお伺いしたいのですが 下記の内容ですと、 テストを押すと、あ行に飛び、あ行を押すと divが展開される動きなのですが、 これをテストを押して、あ行に飛んだときに 自動で展開するようにする方法なありますでしょうか？ <a href="./#anc1">テスト　</a> <h3 id="anc1">あ行</h3> <div id="slidetog1"> <h4>～あ～</h4> <ul> <li>内容</li> </ul> <h4>～い～</h4> <ul> <li>内容</li> </ul> </div> </div> css #slidetog1{display:none;} スクリプト $("#anc1").click(function(){ $("#slidetog1").slideToggle("slow"); });

  • addClassのやり方

    教えてください。 <section class="section" id="AAA"> <h3><img src="" alt="あああ" class="img-responsive"></h3> <div class="toggle" data-plugin-toggle> <div class="toggle"> <label>あああ一覧</label> <div class="row"> <ul class="list-item product-thumb-info-list"> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> </ul> </div> </div> </div> </section> <section class="section" id="BBB"> <h3><img src="" alt="いいい" class="img-responsive"></h3> <div class="toggle" data-plugin-toggle> <div class="toggle"> <label>いいい一覧</label> <div class="row"> <ul class="list-item product-thumb-info-list"> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> </ul> </div> </div> </div> </section> <section class="section" id="CCC"> <h3><img src="" alt="ううう" class="img-responsive"></h3> <div class="toggle" data-plugin-toggle> <div class="toggle"> <label>ううう一覧</label> <div class="row"> <ul class="list-item product-thumb-info-list"> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> </ul> </div> </div> </div> </section> 上記のようなページになっており、 <label>○○一覧</label> をクリックすると、 その下の画像がバラッと表示されるようになっております。 URLで、 「http:// ～/list/」のときは、このソースのままでいいのですが 「http:// ～/list/#AAA」のときは 　<section class="section" id="AAA"> 　<h3><img src="" alt="あああ" class="img-responsive"></h3> 　　<div class="toggle" data-plugin-toggle> 　　<div class="toggle">　←　この行のクラスに「active」を追加したいのです。 どのようにすれば実現できるのでしょうか？ .addClass('active') というものを見つけたのですが どのように書けば、ここの場所に追加というようにかけるのでしょうか？ よろしくお願いします。

  • JQueryについて教えて下さい。

    html部分は <ul> 　<li>テスト1です。</li> 　<li>テスト2です。</li> 　<li>テスト3です。</li> </ul> <div id="test">test</div> となっており、 スクリプト部分は、 $("ul li:not(:first)").css("display","none"); $("#test").click(function(){ 　　if($("+li",this).css("display")=="none"){ 　　　　$("li").slideUp("slow"); 　　　　$("+li",this).slideDown("slow"); 　　} }); としています。 やりたいことは、"test"をクリックしたら、 次の"li"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。

  • onmouseoverの表示切り替えが上手くいかない

    onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。 ＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。 どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript"> <!-- var target = null; function mOver(t){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } document.getElementByID(t).style.display = 'block'; target = t; } function mOut(){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } target=null; } //--> </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>

  • jQueryを使用したタブの改造

    jQueryの知識が殆どないので教えてください。 以下のページで公開されているタブを改造して利用したいと考えています。 http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ ▼スクリプト部分 $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); ▼HTML部分 <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> </div> <div id="tab2" class="tab_content"> <!--Content--> </div> </div> タブをクリックして切り替えるというシンプルなスクリプトなのですが、 1、クリックではなくマウスオーバーでタブを切り替え。 2、アクティブなタブを判別するための要素（？）を「href」ではなく「name」に変更したいと考えています。 自分なりに調べて .click(function() ～の部分を　.hover(function() に、 attr("href")の部分をattr("name")（＋HTMLのhref部分も変更）に 変更することでほぼ理想通りの動作をするようになりました。 ただ、このコードの動作で少し問題が発生しています 1つはカーソルを素早く滑らせて切り替えを行うと、本来は隠れているべきアクティブなタブ以外のタブ要素が全て表示されることがあるという点。 2つはHTMLのname部分を「name="#tab1"」というHTML的にはおかしな記載をしないといけないという点です。できれば「name="tab1"」という記載の仕方で動作できればと思います。 解決方法があれば教えてくだささい。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する