jQueryでloadした要素の操作ができない

2023/08/15 14:27

このQ&Aのポイント

jQueryのloadを使用して特定のIDを読み込んだ後、読み込んだ要素の操作ができない問題に困っています。
IDを読み込んだ後にクラスの追加やdiv要素の追加を試みましたが、読み込む度に適用されず、ページをリロードする必要があります。
firebugやchromeでは問題なく動作するが、iPhoneやxperiaでは適用されません。読み込みの順番や$(window).loadも試しましたが解決しません。

ベストアンサー

jQueryでloadした要素の操作ができない

2011/11/08 00:04

loadにて特定のIDを読み込みした後、そのID内の要素にクラスを追加したりdiv要素を追加したりしようとしていますが、読み込んだり読み込まなかったりで困っています。 firebug、chromeは問題なし、iPhone、xperiaで読み込んだIDにaddClass, wrapが適用できません。ページをリロードすると適用されるので、読み込みの順番かと思いますが、、、 $(window).loadもダメでした。 <div id="loading01"></div> <script type="text/javascript"> $("#loading01").load("../index.html #hogehoge"); </script> <script type="text/javascript"> $("#hogehoge").ready(function() { $('#loading01 li')addClass('css01'); $('#loading01 a').wrap('<div class="css02"><div class="css03">') }); </script> 数時間困り果てています。。。よろしくお願いします。

attyonn
お礼率60% (67/111)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

mc0816
ベストアンサー率100% (1/1)

2011/11/09 14:42 回答No.1

3番目の引数に通信完了後のコールバック関数でやりたい処理を入れてあげるとできるようになりそうです。 load( url, data, callback ) - jQuery 1.3.2 日本語リファレンス http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/ あと、たぶんドットのつけ忘れだけだと思いますが ↓ $('#loading01 li')addClass('css01'); これをaddClassの前ドットをつけてあげれば良いのでは？がんばってください～。

参考URL：: http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/

質問者

お礼 2011/11/09 15:21

loadのコールバック関数の処理もやっていたのですが、できませんでした。。。 jquery mobileだとhtml内で指定した属性により実際に吐き出されるhtmlにクラスを付け加えたりしているので、その前後の処理などでの問題なのかもしれません。とりあえず一つのファイルに別々に処理をしたデータを書き出し、それを単純にロードすることにしました。なかなか思ったようにはいかないものですね…！ありがとうございます。

関連するQ&A

jQuery loadで要素差し替え
回答者の皆様にはいつも大変にお世話になっております。 jQueryのload命令で別のhtmlを読み、#content要素を差し替えたく思っています。読み込むhtmlにも同idの#content要素があります。 $("#content").load("contents1.html #content"); ところが、これを行うと、どうも、 <div id="content"> 　<div id="content">新しく読み込んだ内容</div> 元々の内容</div> のように２重に生成されてるようなのです。コード例は簡略化してありますが、実際にはJavaScriptコードなどが入ったややこしいもので、CSSも、Javascriptも複雑怪奇で手が出ません。また、各htmlは事情があり、内容を編集できません（外部でjava生成）。どうやって読みこんだら要素差し替えられますでしょうか？お助けを！！
- ベストアンサー
- JavaScript
jQueryで追加した要素がマウスホバーに反応しない
jQueryを使って、ボタンを押すと要素を追加しています。後から追加された要素はマウスホバーなどが有効にならないのですが、対象方法などあるでしょうか。下記のようなソースで質問の状態になります。よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript">  </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
jQueryで指定した要素自身のHTML
jQueryを使用していて困っています。下記の様なHTMLがある場合に <div id="hoge"> 　　<div id="first">hoge</div> 　　<div id="second">hogehoge</div> 　　<div id="third">hogehogehoge</div> </div> “<div id="second">hogehoge</div>”を取得したいです。 $("#second").html()では、　　hogehoge が取得されることになりますし、 $("#hoge").html()では、　　<div id="first">hoge</div><div id="second">hogehoge</div><div id="third">hogehogehoge</div> が取得されることになると思います。 $("#second").wrap("<div class='target'></div>")して、 $(".target").html()を取得しても良いのですが、他のところで影響がでそうで怖いので、できれば避けたいです。（殆ど完成状態にありますので……）何か良い方法はありますでしょうか？
- ベストアンサー
- JavaScript
【jQuery】要素を合わせた横幅の取得について
現在、要素が横並びになった横スクロールのサイトを作成中です。各コンテンツ要素のsectionの横幅は固定ではなく、縦幅に合わせて可変するようにしています。 htmlは以下のようにしています。 <div id="wrap"> <div id="header"> <ul><li></li></ul> </div> <div id="secWrap"> <div class="section"> ここに内容 </div> <div class="section"> ここに内容 </div> </div> </div> wrapにsectionの幅を足した合計の横幅（px）を加えたいのですが、正しいサイズを取得できず、sectionがカラム落ちしてしまいます。以下のjsの何かが間違っているのでしょうか？それともCSSなどで何かしらの指定が必要なのでしょうか。お分かりの方がおられましたらご教授頂けたら幸いです。 ■javascript $(function(){ 　　　function adjust(){ var h = $(window).height(); var h1= $('#header').height(); $('.section').css('height', h-h1); var cont = $('.wrap');//コンテンツの横サイズ var contW = $('.section').outerWidth(true) * $('div',cont ).length; cont.css('width', contW); var speed = 50; $('html').mousewheel(function(event, mov) { $(this).scrollLeft($(this).scrollLeft() - mov * speed); $('body').scrollLeft($('body').scrollLeft() - mov * speed); return false; }); } adjust(); $(window).on('resize', function(){ adjust(); }) }); ■CSS body { height: 100%; overflow-y: hidden;} html{height: 100%; } #header{ position: fixed; height: 50px; left: 0px; top: 0px;} .wrap{ top: 50px; position:absolute; height:100%; } .section { float:left; }
- ベストアンサー
- JavaScript
jQueryのfilterについて
jQuery初心者です。 .filterを使って、特定のCSSプロパティの値を持つものを検索し、抽出したもののCSSを書換えたいのですが、うまくいきません。 -------------------- z-indexの値が0以上のdivのwidthを200pxに変えるというコードを書いたつもりなんですが動きません。 ※head内 <style type="text/css">  </style> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> $('div').filter(function(){ return (parseInt($(this).css("z-index").text())>0); }).css("width","200px") </script> ※body内 <div id=neko class=animal></div> <div id=inu class=animal></div> 詳しい方が居られましたら、ご教授いただけませんでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
Jqueryのセレクタ範囲について
お世話になります。【Jquery】 $("#aaa").click(function(){ $(this).css("opacity","1"); }); 【HTML】 <div id="aaa"> <p>hogehoge</p> <p>hogehoge</p> <input type="text" name="hoge"> </div> <div id="aaa"> <p>hoge2hoge2</p> <p>hoge2hoge2</p> <input type="text" name="hoge2"> </div> 上記の2つのdivでそれぞれのdiv内をクリックするれば、そのdiv内のみCSSが適用されるのですが、inputをおした時は発火しないようにすることはできますでしょうか？ $("#aaa").not(":input"）　としてみたのですが、$(this)の値が変わるためDIVが変化しなくなりました。反対に「$(this).css」を「 $("div#aaa").css」にすると2つのDIVに同時に適用されてしまいます。何か良い方法がありましたらよろしくお願い致します。 ※子要素であれば$(this)の下に「.find('input～）」と加えて行けばいいと思うのですか上に遡るにはどのような方法がよいのでしょうか？
- ベストアンサー
- PHP
jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span>     テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
CSSで要素を描画させない
CSSで要素を隠すのには display:none;　とか visiblity:hidden；とかが思いつきますが、これらはエレメントを描画してしまうようでページのloadに余計な時間がかかってしまうんです。たとえばCSSだけで、エレメントを描画させないことって出来るのでしょうか？やっぱりjavascriptを使わないとダメですかね… ※idではなく、classのみ付与されている要素で取得も難しいのです。　jQueyだとクラス名で要素は取得できるとは思うのですが　スクリプト自体、loadされてから実行だし。。 CSSで出来る方法をご存知の方、ぜひともご教授をお願いいたします。よろしくお願いいたします。
- ベストアンサー
- CSS
JQuery インプット要素カウント減算について
お世話になります。 JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。下記はコードです。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../library/js/jquery-1.6.js"></script> <link rel="stylesheet" href="../library/css/defult.css"> <link rel="stylesheet" href="../library/css/style.css"> <title>メールアドレス登録</title> <script type="text/javascript">  </script> </head> <body> <div id="content"> <h1>メールアドレス登録</h1> <form id="multi"> <table> <tbody class="row"> <tr> <td><input type="text" style="width: 320px;" name="emailAddress_1" /></td> <td><a href="#" id="addScnt">Add</a></td> </tr> </tbody> </table> <input type="hidden" name="cnt" id="cnt" /> <div id="process"> <input type="submit" class="processing" name="submit" value="次へ"/> </div> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
jquery slickに関して教えて下さい。
jquery初学者です。 slickのシングルモードは動作するのですが、センターモードの実装が上手くできないため、対処法を教えて下さい。 ////code//// <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト用</title> <script src="js/jquery-1.11.2.min.js"></script> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('.your-class').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] }); }); </script> </head> <body> <div class="your-class"> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> </div> <style> .your-class{ width:350px; margin-left:50px; } .test{ background-color: #00f; } </style> </doby> </html> scriptのファイル等はシングルモードが動作済みであるため、ダウンロード等は済んでいると思われます。よろしくお願い致します。補足参考としたサイトはこちらです。 http://kenwheeler.github.io/slick/ よろしくお願い致します。
- 締切済み
- JavaScript