jQueryのappendソース反映
- jQuery初心者です。壁にぶつかりました。
- 取り込んだ英文を単語分解してjQueryのappend処理をすると画面上は正しく処理されるのですが、ソース上が反映されていません。
- 上記のプログラムでは、追加された単語上では動かないことが分かりました。document.write()を使うと即時ソースに反映されますが、cssがうまく適用されないので困っています。
- ベストアンサー
jQueryのappendソース反映
jQuery初心者です。壁にぶつかりました。 単語をクリックすると、その単語の意味を表示する物を作っています。 取り込んだ英文を単語分解してjQueryのappend処理をすると画面上は正しく処理されるのですが、ソース上が反映されていません。どうすればソース上も反映されるのでしょうか？ プログラムは次の通りです。 -- javascript -- function pasteAreaChange2(statements) { word = statements.split(" "); for (var i=0; i<word.length; i++) { $('#nav > ul').append('<li class="word">' + word[i] + '</li> '); } } -- html -- <!DOCTYPE html> 中略 <body> <div id="nav"> <ul> <li class="word">top</li> <li class="word">about</li> <li class="word">above</li> </ul> end </div> 中略 </body></html> 上記プログラムでは、最初から設定されている"top","about","above"上でクリックすると正しく処理できるのですが、追加された単語上では全く動きません。不思議に思い、ソースの表示またはChromeでF12キーを押した画面では最初から設定されている"top","about","above"以外はソース上にありません。なので動かないことが分かりました。 ちなみにdocument.write()を使うと即時ソースに反映されます。がcssがうまく適用されないので困っています。 大変申し訳ありませんが、どなたかご回答願います。
- ttomioka
- お礼率67% (104/153)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
clickイベントの方がないのでなんとも言えませんが、 https://www.google.co.jp/search?q=jquery+%E8%BF%BD%E5%8A%A0+%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88&oq=jquery+%E8%BF%BD%E5%8A%A0%E3%80%80%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88&aqs=chrome..69i57j0l5.7305j0j7&sourceid=chrome&ie=UTF-8 ソースに反映されていない云々ではなく、appendしたものに対して正しくイベントが設定できていないものだと思われます。 追加したものに対してイベントするときは注意が必要 ということを覚えておいてググるといいです！ https://qiita.com/horikeso/items/5f6863a49e8348f63c4b $(document).on("click", selector, function () { // 処理 }); の selectorの部分はありますか。 jquery append クリック とうで調べるといいかもです
その他の回答 (2)
- t_ohta
- ベストアンサー率38% (5086/13296)
＞ オブジェクトにイベントをバインドしないといけないとの事ですが、javascriptで下記の記述をしています。最初からある"top","about","above"はこれに発火しています。これでは、追加した単語では発火しないのでしょうか？ $('.word').click()の実行とpasteAreaChange2()の実行の順番の問題でしょう。 $('.word').click()を実行した時にDOMに存在しないオブジェクトにはイベントはバインドされませんので、後から追加したオブジェクトには個別にイベントを設定してあげる必要があります。 $('.word') と書くと全ての word クラスのオブジェクトにイベントが設定されるように思ってしまうかもしれませんが、jQueryの動作としては処理を実行した時点でDOMに存在する word クラスのオブジェクトに対してだけ click イベントをバインドしているだけで、後から追加された word クラスのオブジェクトにまで勝手にイベントをバインドしてくれるモノではありません。
お礼
さっそくのご回答、ありがとうございます。 > $('.word') と書くと全ての word クラスのオブジェクトにイベントが設定されるように思ってしまうかもしれませんが... 全くその通りに思っていました。 ご指摘ありがとうございました。
- t_ohta
- ベストアンサー率38% (5086/13296)
＞ 取り込んだ英文を単語分解してjQueryのappend処理をすると画面上は正しく処理されるのですが、ソース上が反映されていません。どうすればソース上も反映されるのでしょうか？ JavaScriptでDOMに追加したモノは、ブラウザの「ソースを表示」で見ても反映されることは原則ありません。 ブラウザが処理しているDOMの状態を見たい時は開発者ツールで見るしかありません。 文字をクリックした際の処理は、それぞれのオブジェクトにイベントをバインドしないといけませんからappendで追加したオブジェクトにもイベントを追加してやらなければクリックしても動作しません。
お礼
早速のご回答、ありがとうございます。 オブジェクトにイベントをバインドしないといけないとの事ですが、javascriptで下記の記述をしています。最初からある"top","about","above"はこれに発火しています。これでは、追加した単語では発火しないのでしょうか？ $(function(){ $('.word').click(function(){ var word = $(this).text(); viewDict(word); }); });
関連するQ&A
- jQueryを使ってある画像を別の画像に置き換えたい。
jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に 置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。 色々試しているのですがうまくいきません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryでリストを分割してページ送りを表示
現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…？ [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>
- ベストアンサー
- JavaScript
- jQueryでスクロールボックスを・・・
添付画像のような縦の自動スライドショーを作ったのですがスクロールボックスのバーがそのままなのが非常に気になります。 そこで自動スライドと共にスクロールバーもそのイメージに合わせて自動スクロールさせたいのですがどうすればいいでしょうか？プラグイン、もしくはＪavaScriptの記述例を教えていただけると幸いです。宜しくお願いします。 【一部ソース】 ▼script <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); </script> ▼html <div id="featured"> <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"></li> ：繰り返し ： </ul> <div id="fragment-1" class="ui-tabs-panel" > <img src="img/no.jpg" alt="" width="250" /> <div class="info" > <h2></h2> </div> </div> ：繰り返し ： </div>
- ベストアンサー
- JavaScript
- jQueryのslideToggleについて
jQueryのslideToggleについて質問です。 クリックするとドロップダウンメニューが表示されるとこまではOKです。 「メニュー1」のサブメニューが開いている状態で「メニュー2」をクリックすると ・既に開いている「メニュー1」のサブメニューが閉じる ・クリックされた「メニュー2」のサブメニューが開く としたいのですがどうすればいいのでしょうか？ ■html <nav id="global-nav"> <ul> <li><a href="#">ホーム</a></li> <li> <a class="sub" href="#">メニュー1</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li> <a class="sub" href="#">メニュー2</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">メニュー3</a></li> </ul> </nav> ■js $('a.sub').click(function(){ $('#global-nav li ul').hide();//←既に開いている場合は他を閉じる $(this).next('ul').slideToggle('slow'); return false; }); jsの2行目を入れることで他のサブメニューが開いている場合の問題はクリアできたのですが「メニュー1」をクリックするたびにサブメニューが開くだけで閉じることがありません^^;
- ベストアンサー
- JavaScript
- <ul><li></li></ul>にするメリットって？
<ul><li></li></ul>にするメリットって？ こんにちは。お世話になっています。 色んな方のソースを見ていると、 例えば 「ABOUT」「SERVICE」「COMPANY」・・・という項目を並べる際に <ul> <li id="about">ABOUT</li> <li id="service">SERVICE</li> <li id="company">COMPANY</li> </ul> という風にリスト化する方が多いと思うのですが中には <div id="contents"> <div class="about">ABOUT</div> <div class="service">SERVISE</service> （略） </div> という風にdivで括る方もいると思います。 （※私はdivで括るタイプです。） また。 <dl id="contents"> <dt class="about">ABOUT</dt> <dt class="service">SERVICE</dt> （略） </dl> という風に<dl><dt></dt></dl>括る方もいると思います。 それぞれのメリットってなんでしょうか？ 特に<ul><li></li></ul>という風に括ってる方がおおいと思うので <ul><li></li></ul>にするメリットが知りたいです。
- 締切済み
- HTML
- 2種類のリスト項目をjQueryを使って揃えたい
スマートフォンサイト制作中です。 やりたい事は 横並びにしている2種類のリスト項目数を jQueryを使って、揃えたいって事です。 以下のようなリストがあって、 2種類のulを横並びにしています。 （2列のテーブルみたいな感じ） <ul class="column1"> <li>あいう</li> <li>かきく</li> <li>さしす</li> </ul> <ul class="column2"> <li>アイウ</li> <li>カキク</li> <li>サシス</li> <li>タチツ</li> </ul> 例として、上記の場合、class="column2"の方が<li>が一つ多いので それに合わせてclass="column１"に<li>を追加して(追加した要素の中身はブランクで)、 横並びを揃えたいのです。 ※要素の中身が2行になったりしてズレることはないです。 考え方として、おそらく class="column1"とclass="column2"のそれぞれのエレメント数を size()で取得して そのエレメント数を比較して、大きい個数に合わせて、 足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな？？ …って思っているのですが どのように書けばよいのか、やっぱり分からないのです。 ※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。 現行のPCサイトのHTMLをいじらずに スマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。 どなたか詳しい方、どうかご教授ください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- AJAX
- jＱueryで作ったドロワーメニューに画像が被る
トップページにjＱueryを使ってドロワーメニューとカルーセルとアコーディオンメニューを作成しました。 それぞれは作動するのですが、ドロワーを一番上に表示させたいのにカルーセルとアコーディオンメニューが上に被ってしまいます。 jQueryは初心者です。よろしくお願いします。 【html】 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script> <script src="js/slick.min.js"></script> </head> <body> <div id="wrapper"> <header id="header"> <div class="navDrawrBtn"><span></span></div> <nav class="navDrawr" role="tablist"> <ul> <li> <a>A</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> <li> <a>B</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> </ul> </nav></header> <div class="contents"> <section class="carousel"> <div class="gimmicCarousel"> <ul class="slider"> <li><a href="#"><img src="images/carousel_1.jpg"></a></li> <li><a href="#"><img src="images/carousel_2.jpg"></a></li> <li><a href="#"><img src="images/carousel_3.jpg"></a></li> </ul></div></section> <div class="accordion"> <ul> <li> <a class="toggle">C</a> <ul> <li><a href="#">ca</a></li> <li><a href="#">cb</a></li> <li><a href="#">cc</a></li> </ul> </li> <li> <a class="toggle">D</a> <ul> <li><a href="#">da</a></li> <li><a href="#">db</a></li> <li><a href="#">dc</a></li> </ul> </li> <script>// ACCORDION $(function() { function accordion() { $(this).toggleClass("active").next().slideToggle(300); } $(".accordion .toggle").click(accordion); });</script> <script src="js/script.js"></script> </body> </html> 【jcript.js】 $(function () { var $nav = $('.navDrawr'); var $navBtn = $('.navDrawrBtn'); var $speed = 300; var $navW = 270; //サブメニューを非表示に $nav.find('.sub').hide(); //hover時の挙動 $nav.find('li').hover(function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ //li要素にhoverした時に.subがあれば実行する if( $(this).find('.sub').length && !$nav.hasClass('open') ){ $(this).find('.sub').slideDown(); } }jj },function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ if(!$nav.hasClass('open')) { $(this).find('.sub').stop(true).slideUp(); } } }); //ドロワーに関連した記述(PCでもドロワーが動作するようにtouchend→clickに変更) $('body').on('click','.navDrawrBtn span',function(){ drawerFunc(); }); $('body').on('click','.overlay',function(){ drawerFunc(); }); function drawerFunc(){ if( $('body').hasClass('menuOpen') ){ $('body').removeClass('menuOpen'); $nav.animate({right:-1*$navW},$speed,'swing'); $('.overlay').fadeOut($speed); }else{ $('body').addClass('menuOpen'); if(!$('.overlay').length){ $('#wrapper').prepend('<div class="overlay"></div>'); } $nav.animate({right:0},$speed,'swing'); $('.overlay').fadeIn($speed); } } }); //カルーセルの設定 $(function () { $('.gimmicCarousel .slider').slick({ accessibility: true, dots: true, autoplay: true, autoplaySpeed:3000, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, } } ] }); });
- ベストアンサー
- JavaScript
- 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などを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- アコーディオン（jquery）クリック後他閉じたい
プログラム初心者のものです。 jQueryを利用したアコーディオンメニューを作成したのですが、現在、クリック後開き、他をクリック後もクリック済みの箇所が開いた状態になっています。 ＜改善＞ クリックしたメニューのみ表示させたいのですが お手数おかけいたします、ご教示いただけますでしょうか。 下記にソースを掲載してみます。 【javascript】 $(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); }); 【HTML】 <div id="nav"> <span class="btn1"><a href="#">A</a></span> <ul> <li class="t1"><a href="#">A-1</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-2</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-3</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> </ul> </div> ご教授の程よろしくお願い致します。
- ベストアンサー
- JavaScript
- 【JQuery】アコーディオンの入れ子について
アコーディオンの入れ子（多階層）について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。 入れ子の数は計3つを予定してます。（第3階層まで） 1～3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。（メニューを増やす度にIDが増えるのを止めたい） ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか？ （ID、CLASSのセレクタの振り方は上記以外でもかまいません） また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか？ （上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません） JavaScriptがよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。
- 締切済み
- JavaScript
お礼
さっそくのご回答、ありがとうございます。 そうですか、追加した要素にはイベントは自動では設定されないのですね。 とても有意義なご指摘、大変ありがとうございました。 参考URLまで示して頂きましてありがとうございました。