jqueryで親要素以外の取得方法

前へ 次へ
このQ&Aのポイント
  • jqueryのセレクタを使用して、特定の要素を取得する方法について説明します。
  • 例えば、特定の値を持つ子要素を持つ親要素以外の要素を取得する場合、以下のような方法があります。
  • 具体的には、指定した値を持つ子要素を持つ親要素以外の要素を特定し、その要素に対して操作を行うことができます。
回答を見る
  • ベストアンサー

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>を色変えはできましたが、それ以外を変える場合がわかりません。 どうかご教授お願いします。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

No.2です。 よくわかってませんが、「200」の他にも100、300のボタンがあるみたいなので、そちらでも同じことをなさりたいのかと勝手に想像して、 イメージのみのサンプルを。（なさりたいことと合致しているかはわかりませんが、こんな方法もあるよというサンプル） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ 　$("#buttons>button").click(function(){ 　　var val = $(this).text(); 　　$("#lists>ul").each(function(){ 　　　var f = false; 　　　$(">li" ,this).each(function(){ f = f || $(this).text()==val; }); 　　　$(this).css("backgroundColor", f?"":"#ccc"); 　　}); 　}); }); //--> </script> </head> <body> <div id="buttons"> <button>100</button> <button>200</button> <button>300</button> </div> <div id="lists"> <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> </body> </html>

eeiina
質問者

お礼

ありがとうございます！ まさにやりたい動作でした。 まったく想像していないやり方で、コードも短く大変勉強になりました。 それぞれの役割を勉強して理解したいと思います。 説明不足のなか、本当にありがとうございました。

その他の回答 (2)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

No.1です。 最初のご質問と補足のコードではやっている内容が少し違いませんか？ 最初のコードは、値が200だったら背景色を変える（そうでない時は何もしない）です。 それなので、No.1の回答もそのようになっています。 補足のコードのように、LIの値に応じてULの色を変えていると、途中での値がなんであろうと、結局は、最後のLIの値によって色が決まることになりませんか？ 何をやりたいのかはよくわかりませんが、補足のようなコードにしたければ、UL単位で子要素のLIの値を一括で評価して背景色を決めるようにしなければならないのではないでしょうか。

eeiina
質問者

お礼

説明がわかりずらく、申し訳ありませんでした。 おっしゃる通り最初のコードは200だったら色を変えるものです。（やりたいこととは真逆ですがここまではできたという説明でした） <li>の中に200を持たない<ul>の色を変えるということが目的です。 >補足のコードのように、LIの値に応じてULの色を変えていると、途中での値がなんであろうと、 >結局は、最後のLIの値によって色が決まることになりませんか？ その通りです。こうなってしまうので解決法がわからず再度補足させていただきました。 ご回答をヒントにもう少しがんばってみます、 ありがとうございました。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

設定されている値がとり得る可能性によって考えが変わるかと思いますが… ◇方法１ 自分以外に値が200のものがないとあらかじめわかっているなら、親要素（ＵＬ）の兄弟要素の背景を設定すればよいと思われます。 　$(this).parent().siblings("ul") で、他の兄弟要素（ＵＬ要素）を取得できるはずです。 ◇方法２ 自分以外にも値200のものが存在する、あるいは値が動的に変わるような場合は、ご質問文にある通りにそれぞれのulの子要素liを調べて値200のものがあれば何もしない、なければ背景色をセットする。 具体的には、上記で取得した各ＵＬ要素についてループ（あるいはeach）で、子要素ＬＩに値200のものがなければ背景色を設定する。 みたいな方法ではいかがでしょうか。

eeiina
質問者

補足

ご回答ありがとうございます。 値はランダムにあるので方法2になります。 以下のようにしてみたのですが、 $('ul li').each(function(){ if($(this).text(); == '200'){ $(this).parent().siblings("ul").children().each(function(){ if($(this).text()=="200"){ $(this).parent().css('background','#fff'); }else{ $(this).parent().css('background','#ccc'); } }) } }) 200がない<UL>の背景色を変えるところで、すべて色が変わってしまいます。 <ul> <li>200</li><li>250</li> </ul> 200がある<UL>の所でも、250など違う値が入っているのでそれを拾って、この<UL>まで色が変わってしまうようです。 条件の仕方などやり方が違うのでしょうか・・ いろいろ試してみたのですがうまくいきませんでした。 この場合どう変えたらよいのか、申し訳ありませんがお願いいたします。

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

関連するQ&A

  • 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のみ） 原因等わかりましたらよろしくお願いいたします。

  • 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 をバインドしたいのですが、それはなにかいい書き方あれば教えてください

  • 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"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。

  • 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内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。

  • jQueryを使ったアコーディオンメニュー

    現在、色々なサイトを見ながら、jQueryを使用した アコーディオンメニューを作成しています。(かなりの初心者です。) リンク先をクリックして、ページが移動した際に、 メニューの開いた状態が保持されるようにしたいのですが、 どうすれば良いのかわからず困っています。 //////////////////////////////////////////////// <script type="text/javascript"> <!-- var $j = jQuery; $j(function(){ $j(".acc").each(function(){ $j("a.open", this).each(function(index){ var $this = $j(this); if(index >= 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle"}; $j(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); //--> </script> html部分 <ul> <li>ABC <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li>... </ul> //////////////////////////////////////////////// ↑このような感じで表記しています。 どなたかお詳しい方、ご教示よろしくお願いします。

  • 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>

  • 不必要になった要素を非表示にしたいのですが、良い方法を教えて下さい。

    こんにちは、お世話になります。 早速ですが、質問させてください。 リスト表示している要素をクリックしたら、その要素の上にフォームを表示してポストしたいと思っています。 おおよそ出来る様になったのですが、不必要になったと思われる時に、非表示にする事ができません。 フォームを表示している<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>

  • 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で要素の獲得方法

    jqueryについてお聞きしたします。 下記のようなソースで <div class="sideBox"> <div class="sideBoxHead"> ・・・ </div> <div class="sideBoxInner basename"> <ul><li class="on"><span title="main title">aaa</span></li> <li><a href="html1" title="title1">bbb</a></li> <li><a href="html2" title="title2">bbb</a></li> ： ： <li class="last"><a href="htmlX" title="titleX">zzz</a></li> </ul></div> </div> "title2"をクリックした時の"html2"を獲得したいのですが $("div.sideBox > div > ul > li > a").click(function(){ var value = this.href; console.log("varlue = " + value); }); としても値が獲得できません。 直接"sideBoxInner basename"classからたどれば上手くいくような気がするのですが クラス名に半角スペースがある場合、どのようにすればいいのでしょうか？

  • 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などを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する