jQueryのloadメソッドの効率化について

このQ&Aのポイント
  • jQueryのloadメソッドを効率的に使用する方法について教えてください。
  • loadメソッドを使用して要素を読み込む際に、効率化する方法を教えてください。
  • jQueryのloadメソッドを使った要素の読み込みを効率的に行う方法についてご教示ください。
回答を見る
  • ベストアンサー

jQueryでloadメソッドを使用しているのですがコードの効率化につ

jQueryでloadメソッドを使用しているのですがコードの効率化についてヒントをください。 こんなコードです。 $("#load1").load("A.html .flag1", function(Text, status) {   if ($("#load1").text() == "A") $("#load1").css({backgroundColor:"red"});  else if ($("#load1").text() == "B") $("#load1").css({backgroundColor:"yellow"}); else if ($("#load1").text() == "C") $("#load1").css({backgroundColor:"blue"}); }); $("#load2").load("B.html .flag1", function(Text, status) {   if ($("#load1").text() == "A") $("#load1").css({backgroundColor:"red"});  else if ($("#load1").text() == "B") $("#load1").css({backgroundColor:"yellow"}); else if ($("#load1").text() == "C") $("#load1").css({backgroundColor:"blue"}); }); $("#load3").load("C.html .flag1", function(Text, status) {   if ($("#load1").text() == "A") $("#load1").css({backgroundColor:"red"});  else if ($("#load1").text() == "B") $("#load1").css({backgroundColor:"yellow"}); else if ($("#load1").text() == "C") $("#load1").css({backgroundColor:"blue"}); }); ・ ・ ・ 指定している要素とloadするURL以外はコードが全く一緒なんですよね これをどうにか効率化出来ないでしょうか?

  • mr-r00
  • お礼率93% (480/516)

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

idとurlのリストをjQuery.eachでまわせばいいんじゃないかな var list = { '#load1':'a.html', '#load2':'b.html', '#load3':'c.html' }; jQuery.each(list, function(key,val) { $(key)load(val,~~~ }); http://semooh.jp/jquery/api/utilities/jQuery.each/object%2C+callback/

mr-r00
質問者

お礼

希望のものが出来ました ありがとうございあmす!

関連するQ&A

  • jQueryでloadメソッドを使用して要素を解析して文字列を表示して

    jQueryでloadメソッドを使用して要素を解析して文字列を表示しています。 その文字列が何であるかを判定して後の動作を行いたいのですがどうしても出来ません。 コールバックはうまくいっているみたいなのですが・・・ $(function() { var load1 = $("load1"); $("#load1").load("A.html .flag1", null, function(text, status, XMLHttpRequest) { if ($("#load1").length == "A") { load1.css({ backgroundColor: "red" }); }; alert("text: " + text + "\nstatus: " + status + XMLHttpRequest); }); });

  • jQueryのloadのcallbackが変な動作

    jQueryのloadメソッドでCallBackが成功しているにも関わらず失敗する場合があります・・・対象方法が全くわからないのでご教示願えませんでしょうか? 【A.html】 <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <table> <tr> <td><div id = "target_1"><div id = "target_2"></td> </tr> </table> <script type="text/javascript"> $.ajaxSetup({ cache: false }); var xmlHttp; xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", "A.html", false); xmlHttp.send(null); alert(xmlHttp.responseText); $(document).ready(function(){ $("#target_1").load("a.txt .tag", function(Text, status) { if ($("#target_1").text() == "あああ") { $("#target_1").replaceWith("<img src = 'a.png'>"); else if ($("#target_1").text() == "いいい") $("#target_1").replaceWith("<img src = 'b.png'>"); alert( "text: " + Text + "\nstatus: " + status ); }); $(document).ready(function(){ $("#target_1").load("a.txt .tag", function(Text, status) { if ($("#target_1").text() == "あああ") { $("#target_2").load("a.txt .5tag");★ else if ($("#target_1").text() == "いいい") $("#target_2").load("a.txt .5tag");★ alert( "text: " + Text + "\nstatus: " + status ); }); }); 問題は★印が付いているところの処理です。 アラートではSUCCESSになるのですが、なぜかロードが失敗する時があります。 割合としては10回に1回程度で1回発生するとブラウザの再起動をしない限り二度とロードができなくなります。 原因は何がいけないのでしょうか?

  • jQuery.eachは第2引数以上は作れないのでしょうか?

    jQuery.eachは第2引数以上は作れないのでしょうか? 配列として3つ設定したい場合はできないものなのでしょうか? var list = { "#load1": "A.html .ld1":"aaa1", "#load2": "B.html .ld2":"bbb2", "#load3": "C.html .ld3":"ccc3" }; jQuery.each(list, function(key,val, arg) { $(key).load(val, function(Text, status) { if ($(key).text() == "A") $(arg).replaceWith("<img src='baby.png'/>"); }); }); こんな書き方は出来なかったので・・・ 第3引数があるか調べてみたものの第2までしか書いていないのでないと思っています。 しかし3つ以上の場合はどのようにしたらいいのでしょうか?

  • java jqueryのnameとid

    ラジオボタンでcssを切り替える以下のようなプログラムがあるのですが、 $(function(){ entryChange1(); entryChange2(); entryChange3(); entryChange4(); entryChange5(); }); $(window).load(function entryChange1() { radio = document.getElementsByName('name1'); if(radio[1].checked) { $('.a,.b').show(); $('.c').css('width','585px'); }else if(radio[0].checked){ $('.a,.b').hide(); $('.c').css('width','270px'); } }); function entryChange1(){ $("input[name='name1'][value='0']").click(function() { $('.a,.b').show(); $('.c').css('width','585px'); }); $("input[name='name1'][value='1']").click(function() { $('a,.b').hide(); $('.c').css('width','270px'); }); } //entryChange2~5();は省略 ここで使っているnameはphpの方でも扱っているパラメータなのでjavascriptとは切り離したいのですが、idで代替はできますか? なにか方法があれば教えていただければありがたいです。

  • jQueryのload()を使用して外部のhtmlの特定の箇所を、別の

    jQueryのload()を使用して外部のhtmlの特定の箇所を、別のhtmlの特定のセレクに読み込んでいます。ただ、読み込む先のURLが動的に変わるので、変数で扱えたらと考えています。 jQueryの中身の該当する部分と思われる箇所を見てみたのですが、引数で指定されているurlを変数で扱う方法などありませんでしょうか?未熟な知識で申し訳ないのですが、どなた教えていただけませんでしょうか? jqueryのload()を使用しなくても、同じような挙動をする他のおすすめなどもあれば教えていただけると非常に助かります。 【ソース】 $(document).ready(function(){ $("#box_A").load("[URL]←(このurlを変数で扱いたい) #box_B"); }); 【jQueryの中味】 jQuery.fn.extend({ // Keep a copy of the old load _load: jQuery.fn.load, load: function( url, params, callback ) { if ( typeof url !== "string" ) return this._load( url ); var off = url.indexOf(" "); if ( off >= 0 ) { var selector = url.slice(off, url.length); url = url.slice(0, off); } // Default to a GET request var type = "GET"; // If the second parameter was provided if ( params ) // If it's a function if ( jQuery.isFunction( params ) ) { // We assume that it's the callback callback = params; params = null; // Otherwise, build a param string } else if( typeof params === "object" ) { params = jQuery.param( params ); type = "POST"; } var self = this; // Request the remote document jQuery.ajax({ url: url, type: type, dataType: "html", data: params, complete: function(res, status){ // If successful, inject the HTML into all the matched elements if ( status == "success" || status == "notmodified" ) // See if a selector was specified self.html( selector ? // Create a dummy div to hold the results jQuery("<div/>") // inject the contents of the document in, removing the scripts // to avoid any 'Permission Denied' errors in IE .append(res.responseText.replace(/<script(.|\s)*?\/script>/g, "")) // Locate the specified elements .find(selector) : // If not, just inject the full result res.responseText ); if( callback ) self.each( callback, [res.responseText, status, res] ); } }); return this; },  【中略】 });

  • JQueryで、liタグの背景に色を付けたい。

    JQueryで、各liタグに背景色を付けたいのですが、 上手くいきません。多分clickあたりで間違ってると思うのですが・・・。 そもそも、clickの後ろには、functionを書けばいいのか?(以下ソースと同じ) それとも$だけなのか、概念がはっきり分かってません。 書き方等の解説をしてくれているページはないでしょうか・・・。 いろいろ調べてみたのですが、こうかけば動く。見たいな事しか書いてなくて 基本があやふやになっております。 ご教授お願いします。 ====以下ソース==== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>jQueryテスト</title> <script type="text/javascript" src="../jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $("input:button").click(function('#list'){ .find('li.high').css('backgroundColor', 'red').end() .find('li.middle').css('backgroundColor', 'green').end() .find('li.low').css('backgroundColor', 'blue'); }); }); </script> </head> <body> <ul id="list"> <li class="high">a</li> <li class="middle">b</li> <li class="low">c</li> </ul> <form> <input type="button" value="背景変更"> </form> </body> </html>

  • jQuery: if文によるcss判定

    こんにちは、 <p style="color:red;">テスト</p> $(function(){ $("p").click(function(){ if($(this).css("color")=="red"){ $(this).css("color", "blue"); }else{ $(this).css("color", "red"); } }); }); 以上のように、文字色が赤だった場合には青に、赤以外であった場合は赤に、というif文を記述しても機能しませんでした。=="red" の部分を !="red" とすると、文字色が変化するので、デフォルトの文字色が赤と判定されていないようです。色指定を16進数やrgb形式にしても結果は同じでした。p要素をクラスによる色指定(.red { color:red })に変更し、hasClass による条件分岐にした場合は、問題なく機能します。どうして上記が動作しないのか、どなたか教えて頂けませんか。よろしくお願いします。

  • jsで、inputタグを使わないで、答えを出す方法

    jsでinputタグを使うことの問題点は、改行されないことです。 <br>も/nも使いましたがだめでした。 つまり、誰も答えられないということですね。😡。 cssは使いたくないです。 inputタグ以外の方法をお教えいただきたいです。 <script type="text/javascript"> function kotae() { ten=0 if(f.q1.value == "松山市") {f.q1.style.backgroundColor="aqua ";ten = ten + 25} else f.q1.style.backgroundColor="red" if(f.q2.value == "高松市") {f.q2.style.backgroundColor="aqua ";ten = ten + 25} else f.q2.style.backgroundColor="red" if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25} else f.q3.style.backgroundColor="red" if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25} else f.q4.style.backgroundColor="red" f.tokuten.value=ten //ここから if(f.tokuten.value ==100){f.rank.value = 'S'} else if(f.tokuten.value >=75){f.rank.value = 'A'} else if(f.tokuten.value >=50){f.rank.value = 'B'} else if(f.tokuten.value >=25){f.rank.value = 'C'} else if(f.tokuten.value <25){f.rank.value = 'D'} //ここまで } </script> <input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p> <input name=tokuten size="6">点 <!--HTMLここから--> <input name=rank size="6">ランク <!--HTMLここまで-->

  • jQueryのloadを使用して要素を解析して表示するとき同時にテーブ

    jQueryのloadを使用して要素を解析して表示するとき同時にテーブルのセル背景の色変更をしたいと思っています。 解析して表示は出来るのですがどうしても色が変わってくれません。 $(function(){ var target1_load=$("#target1_load"); target1_load.load("B.html .youso"); if (target1_load.text()=="XXX")target1_load.css({backgroundColor:"red"}); }); としていますが対象divのある個所は下記のようになっています。 <table style="width: 90%"> <tr> <td style="width: 180px"> <div id="d1" style="width: 180px">●ビバガッツ1</div></td> <td style="width: 180px"> <img alt="" src="login-blue.gif" width="89" height="26" /></td> <td style="width: 80px"> <img alt="" src="b_count1.gif" width="24" height="27" /></td> <td style="width: 100px">&nbsp;</td> <td><div id="target1_load"></div></td> </tr> <tr> <td colspan="5"><p id="p1"></p></td> よろしくお願いします

  • ウィンドウサイズを取得するjQuery

    レスポンシブ対応の際、jQueryでリアルタイムにウィンドウサイズを取得する方法について質問です。 例えば「ウィンドウサイズが700以下の時、文字色を赤に変える」としたい時、検索すると下記のようにすればよいとでてきます。 ■ HTML <p>サンプルテキスト</p> ■ jQuery var WindowWidth = $(window).width(); $(window).resize(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } else { $('#sample').css({ color: 'black' }); } }); 確かにこの記述をするとウィンドウサイズを変更すれば適用されるのですが、元々のサイズが700px以下のときには適用されません。 なので、今は下記のように記述しています。 ■ jQuery var WindowWidth = $(window).width(); $(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } }); $(window).resize(function(){ if(WindowWidth < 700){ $("p").css({ color: 'red' }); } else { $('#sample').css({ color: 'black' }); } }); こう書くと希望通りの動作(ウィンドウサイズが700px以下のときは文字が赤色になり、ウィンドウサイズを変更するとリアルタイムで変更される)をしてくれるのですが、もう少しきれいにまとめられるのではないかな?と考えております。しかし、うまい記述方法がわからず…。 ご教授いただけると助かります。

専門家に質問してみよう