jQuery変数を使って複数のセレクタに適用する方法について

このQ&Aのポイント
  • jQueryを使って複数のセレクタに一括でスタイルを適用する方法について質問です。
  • 現在、複数セレクタを一気にまとめて書く方法がわからず困っています。
  • 変数を使用してスマートにコードを書く方法を教えていただきたいです。
回答を見る
  • ベストアンサー

jQuery 変数を複数のセレクタに適用する。

jQueryを書き始めの初心者ですが、よろしくお願いします。 一度書いたものを(DOMをいじる程度ですが) jQueryを高速化のため、スクリプトを現在、見直しています。 HTMLは以下な感じです。 <ul id="hoge"> <li><a>項目1</a><li> <li><em>項目2</em><li> </ul> 上記の各liの、さらに中の要素(aとem)を取得するために、 今まで以下のように書いていたのですが $("#hoge li a, #hoge li em").css("font-weight","bold"); これを、変数(hoge)を使って、書き換えたいと思います。 var hoge = $("#hoge li"); 複数セレクタを指定しているのですが、 この場合、セレクタを一気にまとめて書くのは難しいのでしょうか? ↓のように書くしかないのでしょうか? hoge.find("a").css("font-weight","bold"); hoge.find("em").css("font-weight","bold"); なんか、あまりスマートではないので、 良い方法がありましたら、教えていただけたらと思います。 どうぞ宜しくお願いいたします。

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

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

試してませんが セレクタを "a, em" などとすることでいけませんか?

mc0816
質問者

お礼

ありがとうございます。 普通に "a, em" で行けました! いつも通りやればいいだけなのに、難しく考えていました。 ありがとうございました。

関連するQ&A

  • CSSのセレクタの指定方法

    基本的なところで恐縮です。 ひさびさに他人が作ったHTML&CSSをいじっていたら混乱してきました。たとえば以下のようはHTMLがあったとします。 -- <ul id="gmemu"> <li>hoge1</li> <li>hoge2</li> </ul> -- このとき、ul、liタグのスタイルを定義したいときのセレクタの指定の仕方としてはどちらが正しいのでしょうか? ■その1(ID名 タグ名) #gmenu ul{ } #gmenu li{ } ■その2(タグ名 ID名) ul#gmenu{ } ul#gmenu li{ } かなり初心者入ってますが、教えていただければ幸いです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • jQuery 子孫セレクタがうまくいかない

    最近jQueryを勉強しはじめた者です。勉強していく中で、 疑問が生じたので、質問させていただきます。 jQueryの子孫セレクタが意図したとおりに動きません。 具体的には : $(function(){ $("p strong").remove(); }); : <p><em><strong>削除される</strong>abcdefg</em></p> <p><div><strong>削除されるはず</strong>abcdefg</div></p> : と記述した時、  <strong>削除されるはず</strong>  の部分が削除されません。   <strong>削除される</strong>  の部分は削除されます。 以下のときは、2つとも削除されます。 : $(function(){ $("li strong").remove(); }); : <ol> <li><em><strong>削除される</strong>abcdefg</em></li> <li><div><strong>削除されるはず</strong>abcdefg</div></li> </ol> : 私は、どの場合であっても削除されると考えていました。 ブロックレベル要素とインライン要素が関係していそうな感じはするのですが、 なぜ、このようになるか理由がわかりません。 よろしくお願い申し上げます。

  • jQuery 1つの要素を複数箇所に表示したい

    いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか? ▼HTML ------------------- <div class="hoge"></div> ~別要素(省略)~ <div class="info">  <ul>   <li>項目1</li>   <li>項目2</li>  </ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • jQueryでドロップダウンメニューができない

    jQueryの参考書をみながらドロップダウンメニューを実装しようとしたのですが うまくいきません。 締切が迫って焦っております。 <ul class="main"> <li><a href="index.html">メインA</a></li> <li><a href="concept.html">メインA</a></li> <li><a href="service.html">メインA</a> <ul class="sub"> <li><a href="">サブ1</a></li> <li><a href="">サブ2</a></li> <li><a href="">サブ3</a></li> <li><a href="">サブ4</a></li> <li><a href="">サブ5</a></li> </ul> </li> <li><a href="faq.html">メインA</a></li> <li><a href="access.html">メインA</a></li> </ul> cssは .main { clear:both; width:830px; height:42px; margin:0 auto; list-style-type:none; } ul .main li { width:166px; height:42px; float:left; position:relative; background:url(../../img/index/btn.png); } .main li a { display:block; width:100%; height:100%; padding:10px 0 0 40px; font-size:14px; font-weight:bold; color:#333333; text-decoration:none; line-height:1.5em; } ul .sub{ display:none; } scriptは <script type="text/javascript"> $(function(){ $("ul.main li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) </script> です。いろいろ試行錯誤したのですがドロップダウンメニュ-が表示されず 困っています。何か見落としがあるのでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • jQueryプラグインのメガドロップダウンメニュー

    jQueryプラグインのメガドロップダウンメニューについて 当方プログラミング初心者です。 至らない点ばかりですが、どうかご容赦ください。。。 この度、仕事でこのメガドロップダウンメニューを使用することになりました。 サンプルサイトです→(1)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/# (2)http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/ 使用したいのは、 (1)にあるサンプル(オンマウスすると車の写真などが出てくる) スタイルは(2)にある、白色のバー なのですが、どうもうまくいきません・・・ 上記サイトからダウンロードしたもの ・jquery.js ・jquery.dcmegamenu.1.3.3.js ・dcmegamenu.css ・white.css その他素材などが、指定した名前のフォルダに入っています。 英語が読めないので、わからない単語は調べたりしてなんとかメニューとして形にはできたのですが バーの色は黒いままだし、まずドロップダウンしません。 今、この状態のまま詰まってしまっています・・・ たぶんめちゃくちゃになってしまっていると思うのですが、 どこが悪いのかわかりません・・・>< ★HTML(ヘッド) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ~~~ <head> <link rel="stylesheet" href="css/white.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.js"></script> <link rel="stylesheet" href="css/dcmegamenu.css" type="text/css" /> <script type="text/javascript" src="jquery/jquery.dcmegamenu.1.3.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $("mega-menu").dcMegaMenu({ rowItems: "3", speed: "fast" }); }); </script> </head> ★HTML(ボディ) <div class="dcjq-mega-menu demo-container"> <ul id="mega-menu" class="menu"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a> <ul> <li id="menu-item-1"><a href="#">Coupe</a> <ul> <li><a href="#">Citroen C4</a></li> <li><a href="#">Honda CR-Z</a></li> <li><a href="#">BMW 3 Series</a></li> <li><a href="#">Volvo C30</a></li> </ul> </li> <li id="menu-item-2"><a href="#">Saloon</a> <ul> <li><a href="#">Volkswagen Passat</a></li> <li><a href="#">Volvo S40</a></li> <li><a href="#">Vauxhall Insignia</a></li> <li><a href="#">Mitsubishi Lancer</a></li> </ul> </li> ~~~~~~~~省略 <li id="menu-item-6"><a href="#">High Performance Cars</a> <ul> <li><a href="#">Lamborghini Gallardo</a></li> <li><a href="#">Ferrari F430</a></li> <li><a href="#">Aston Martin Vantage</a></li> <li><a href="#">Porsche 911 Turbo</a></li> </ul> </li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">About Us</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> 名前はまだサンプル通りです。 ★CSS(1)(dcmegamenu.css) http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/dcmegamenu.css ★CSS(2)(white.css) http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/css/skins/white.css つっこみ所だらけかと思います・・・すみません・・・ どこが悪いのでしょうか・・・? 私のような初心者にはまだまだ早いプログラミングなのかもしれませんが、 どうか、お力添えをお願いできれば、、、、お願いします。

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

  • jQueryで記事を6列表示にしたいのです。

    jQueryで記事を6列表示にしたいのです。 jQueryで6列表示をしたいと思って試行錯誤をしていたのですが、 全くわからずじまいで、どうしたらいいのかと知恵袋に投稿致しました。 各カテゴリごとに表示をするようになっているのですが、 オールだけ全て表示になります。 5つ残して表示させればいいのですが、各カテゴリが 消えてしまうので、どうしてもオールは6行表示させたいと思っています。 どなたか助けていただけませんでしょうか? jQuery ---------------------------------------------- $(document).ready(function() { $('ul#navi a').click(function() { $(this).css('outline','none'); $('ul#navi .all').removeClass('current'); $(this).parent().addClass('current'); var filterVal = $(this).text().toLowerCase().replace(' ','-'); if(filterVal == 'all') { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } else { $('ul#portfolio li').each(function() { if(!$(this).hasClass(filterVal)) { $(this).fadeOut('normal').addClass('hidden'); } else { $(this).fadeIn('slow').removeClass('hidden'); } }); } return false; }); }); HTML ---------------------------------------------- <ul id="navi"> <li class="all"><a href="#">All</a></li> <li><a href="#">CMS</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> </ul> <ul id="portfolio"> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="cms"><a href="#">Movable Type</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">prototype</a></li> <li class="css"><a href="#">CSSビギナー</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="css"><a href="#">CSSテンプレート</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">jQuery</a></li> <li class="javascript"><a href="#">plugin</a></li> </ul>

  • 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】アコーディオンの入れ子について

    アコーディオンの入れ子(多階層)について、お教えください。 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がよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。

  • jQueryで複数あるUL要素の最後のLI要素以外を処理したい

    jQueryで複数あるUL要素の最後のLI要素以外を処理したい 現在、HTMLを <ul> <li>foo</li> <li>bar</li> <li>com</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>com</li>(※) </ul> 上記のように記述しています。 今回、jQueryを使い、2カ所あるUL要素の最後のLI要素以外を処理したいと思い、 $(function(){ $("ul li:not(:last)").css("~","~"); }); 以上のようにjQueryを記述したところ、1カ所目の最後のLI要素は無視されCSSが追加されてしまいました。 1カ所目・2カ所目とも同じように処理するにはどうしたら良いでしょうか? ご指導・ご鞭撻のほど、よろしくお願いします。

    • ベストアンサー
    • AJAX

専門家に質問してみよう