jQueryにてIEでの不具合 each処理?
- cromeやfirefoxでは正常に動作するが、IEでは一部動かないパーツがある
- クリックしたボタンの数値があるULの色を変えるもので、100と300は正常に変わるが200は変わらない
- <li>の中で最後に書かれている数値が効かなくなるようで、100と200を入れ替えると100が効かなくなる（IEのみ）
- ベストアンサー
jqueryにてIEでの不具合 each処理？
cromeやfirefoxでは正常に動きますが、IEにて一部動いてくれない部分があり困っています。 おかしな点や原因など教えていただきたくご質問させていただきます。 <style> .that{color:red;} </style> <script type="text/javascript"> $(function(){ $('button').click(function(){ $('#list>ul').removeClass('that'); var val = $(this).text(); $('#list>ul li').each(function(){ if($(this).text() == val){ $(this).parent().addClass('that'); }; }); }); }); </script> html↓ <button>100</button> <button>200</button> <button>300</button> <div id="list"> <ul> <li>100</li><li>200</li> </ul> <ul> <li>300</li><li>200</li> </ul> </div> クリックしたボタンの数値があるULの色を変えるものです。 100と300をクリックした場合は正常に変わりますが、200をクリックした時に変わらなくなります。 <li>の中で最後に書かれている数値が効かなくなるようで、<li>の100と200を入れ替えると100が効かなくなります。（IEのみ） 原因等わかりましたらよろしくお願いいたします。
- eeiina
- お礼率50% (27/54)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> if($(this).text() == val){ の前で $(this).text() の値を alert($(this).text()); で調べればわかるけど、 <li>200</li> の .text() は "200" ではなくて "200 " が帰ってくる。 変な値が帰ってくるのは IE が Quirks モードで動作しているからかも。 対処方法だけれど、 HTML の初めに DOCTYPE を宣言して IE を標準モードにするか <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> とても勧められないけれど、どうしても Quirks モードのままがいいなら、 UL の閉じタグを改行しないで LI タグのすぐ後ろに書けば、回避できるとおもう。 <ul> <li>100</li><li>200</li></ul> <ul> <li>300</li><li>200</li></ul>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ようは、これと同じことでは？ http://okwave.jp/qa/q7707134.html ＭＳお得意の「仕様」なのかも知れませんが、 if($(this).text() == val){ の時にＩＥだけ切り出して、テキストを読み替えてあげるか、あるいは最初に整理しておくか… 動的に値が変化するのか、実際にテキストの値が取る可能性の範囲がどのようなものかなどを考慮して、自衛手段を講じるしかなさそう。
お礼
そうですね・・ これでどうこうしようというのが無理があるというのが理解できた気がします。 自衛手段をとりたいと思います。 ありがとうございました。
関連するQ&A
- jquery htmlのcookie保存・表示
まず、やろうとしていることはボタンをクリックし、その中身と同じデータを持つものを xmlから読み込み表示します。 次にそこから他のページへ移動して、戻ってきたときに最後に表示していた内容を そのまま表示させたいのです。 crome、ieにて動作確認をさせたいです。 現状のソースです、 <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="JavaScript" type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="../jq/jquery.cookie.js"></script> <script type="text/javascript"> $(function(){ if($.cookie("name")){ $("#newbox").html($.cookie("name")); } $('#buttons button').click(function(){ var val = $(this).text(); $.ajax({ url:"index.xml", type:"get", dataType:"xml", timeout:1000, cache:false, error:function(){ alert("error"); }, success:function(xml){ var listdata=""; $(xml).find("list").each(function(){ var name=$(this).find("name").text(); // var imgs=$(this).find("imgs").text(); // var price=$(this).find("price").text(); // $(this).children().each(function(){ if($(this).text()==val){ listdata+='<ul><li>'+name+'</li><li><img src="'+imgs+'" /></li><li>' +price+ '</li></ul>';}}) }); $("#newbox").html(listdata); $.cookie("name",$("#newbox").html()); } }); }) }); </script> </head> <body> <div id="buttons"> <button>600</button><button>700</button><button>800</button><button>900</button> </div> <div id="newbox"></div> </body> --xml-------- <list> <name>いちご</name> <imgs>001.jpg</imgs> <price>600</price> </list> <list> <name>ぶどう</name> <imgs>002.jpg</imgs> <price>700</price> </list> <list> <name>スイカ</name> <imgs>003.jpg</imgs> <price>800</price> </list> <list> <name>メロン</name> <imgs>004.jpg</imgs> <price>900</price> </list> <list> <name>りんご</name> <imgs>005.jpg</imgs> <price>600</price> </list> ・・・続く -------------- この状態だと、内容が少ない場合は表示されるのですが、内容が多くなると表示されなくなります。 基本的なことが間違っているのか、cookieの処理がおかしいのか 理由がわからず困っています。 どうかご教授お願いいたします。
- ベストアンサー
- JavaScript
- jquery 親要素以外の取得
下記のような形で200をクリックしたら<li>に200を持つ<ul>以外の<ul>の色変えをしたいと思っています。 <button id="100">100</button> <button id="200">200</button> <button id="300">300</button> <div> <ul> <li>100</li><li>150</li> </ul> <ul> <li>200</li><li>250</li> </ul> <ul> <li>300</li><li>350</li> </ul> ・ ・ </div> このようなhtmlで200のボタンを押したとき<li>中身が200の<ul>はそのまま、他の<ul>を色変えする形です。 $('button#200').click(function(){ $('ul li').each(function(){ var siz = $(this).text(); if(siz == '200'){ $(this).parent().css('background','#ccc'); } }) }); 200を押したとき<li>200を含む<ul>を色変えはできましたが、それ以外を変える場合がわかりません。 どうかご教授お願いします。
- ベストアンサー
- JavaScript
- jQuery - bind('click', x)
<!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、 この hideFunc （メニューを消す命令） がすぐ呼ばれてしまいます。 適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、 いまいちスマートな感じがしません。 ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください
- 締切済み
- JavaScript
- jQueryのアコーディオンがIE6でちゃんと動いてくれない
jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。
- 締切済み
- HTML
- 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"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- jQueryで電卓を作っているのですが
現在、以下のようなコードで電卓を作成しているのですが。 このコードだと足し算だけならできたのですが 引き算をすると二週目の計算に不具合が生じてしまいます。 例えばどのような不具合かと言うと 30 - 10 = 20 ←この段階では問題はありません。 しかし、この答えからさらに次の計算を行うと 20 - 5 = -15 ←このようになぜか負の値になってしまいます。 自分なりに何が原因なのかを調べてみたのですが 足し算のほうは問題なく表示されるだけに なぜどこからとも無く-の記号が現れるのか分からない状況です。 ちなみにかけ算も試してみたのですがかけ算の場合は2週目の計算結果が0に なってしまいます。 この問題はどのように記述すれば解決できるのでしょうか？ 分かる方お願いします。 ～～HTML～～ <body> <span> <div></div> <section></section> <section> <ul> <li></li><li></li><li></li><li>AC</li> </ul> <ul> <li>1</li><li>2</li><li>3</li><li>+</li> </ul> <ul> <li>4</li><li>5</li><li>6</li><li>-</li> </ul> <ul> <li>7</li><li>8</li><li>9</li><li>×</li> </ul> <ul> <li>0</li><li>.</li><li>=</li><li>÷</li> </ul> </section> </span> </body> ～～jQuery～～ /*数字の入力*/ $(".num").click(function(){ var num = $(this).text(); if(inputZ.text() == "" && num == 0){ inputZ.append(num + "."); } else{ inputZ.append(num); } }); /*リセット*/ $(".reset").click(function(){ inputZ.text(""); divTxt = Div.text(""); }); /*加算*/ $(".addition").click(function(){ if(inputZ.text() == ""){ leftFml_01 = rightFml_01 } else{ leftFml_01 = parseFloat(inputZ.text()); } inputZ.text(""); divTxt_01 = Div.text(leftFml_01 + " +"); Ans.click(function(){ if(inputZ.text() == ""){ rightFml_01 = leftFml_01; } else{ rightFml_01 = parseFloat(inputZ.text()); } reply_01 = leftFml_01 + rightFml_01; inputZ.text(reply_01); leftFml_01 = null; divTxt_01.text(""); }); }); /*減算*/ $(".subtraction").click(function(){ if(inputZ.text() == ""){ leftFml_02 = rightFml_02 } else{ leftFml_02 = parseFloat(inputZ.text()); } rightFml_02 = null; inputZ.text(""); divTxt_02 = Div.text(leftFml_02 + " -"); Ans.click(function(){ if(inputZ.text() == ""){ rightFml_02 = leftFml_02; } else{ rightFml_02 = parseFloat(inputZ.text()); } reply_02 = leftFml_02 - rightFml_02; inputZ.text(reply_02); leftFml_02 = null; divTxt_02.text(""); }); }); });
- ベストアンサー
- JavaScript
- 不必要になった要素を非表示にしたいのですが、良い方法を教えて下さい。
こんにちは、お世話になります。 早速ですが、質問させてください。 リスト表示している要素をクリックしたら、その要素の上にフォームを表示してポストしたいと思っています。 おおよそ出来る様になったのですが、不必要になったと思われる時に、非表示にする事ができません。 フォームを表示している<div>以外の部分をクリックしたり、入力部からフォーカスが外れた時に非表示にするにはどのようにすれば良いか教えて下さい。 jQueryを使っています。firefox 3 で動けば良いと思っています。 見にくいと思いますが、以下に出来るだけ簡略化した物を貼り付けます（tabを全角スペースにしてあります）。よろしくおねがいします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('span').each(function(){ $(this).click(function(){ $('#form_box').hide(); $('#name').val($(this).html()); var offset = $(this).offset(); $('#form_box').css({'top' : offset.top , 'left' : offset.left }).show('fast',function(){$('#name').focus()}); }); }) //$('#name').blur(function(){$('#form_box').hide();}) }); function hide() { $('#form_box').hide(); return false; } </script> <style type="text/css"> span { cursor : pointer; } </style> </head> <body> <ul> <li><span>1</span> <ul> <li><span>1-1</span></li> </ul> </li> <li><span>2</span> <ul> <li><span>2-1</span> <ul> <li><span>2-1-1</span></li> </ul> </li> <li><span>2-2</span></li> </ul> </li> </ul> <div id="form_box" style="display:none;position:absolute;"> <form onsubmit="alert('送信')"> <input type="text" id="name" /> <input type="submit" value="送信" /> <button onclick="return hide();">閉じる</button> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 >"200 " 違う値が返ってくるんですね、標準モードで試してみましたがダメでした。 <ul> <li>100</li><li>200</li></ul> このやり方で動作したました！全てのhtmlを変えるとなると現実的ではないですが、 回避する手段を教えていただき大変助かりました。 もう少し探ってみたいと思います、 ありがとうございました！