jQueryでHTMLElementに対してaddClass()を行いたい – jquery

質問:


jQueyのaddClass()を使いたいのですが、

$("#svg_textarea").addClass( "hoge" );

とやるとうまくいくものの、

$("#svg_textarea")[0].addClass( "hoge" );

とやるとうまくいきません。
HTMLElementに対してaddClass()を使うにはどうしたらいいのでしょうか?

というかそもそもjQueryを良くわかってないで使ってるからこういう所で躓く。
$(“#svg_textarea”)は配列のような物と理解しているんですが、その理解が違ってますか?

質問者: Ichiro Hari

kotatsu

eq()を使います。

$('#svg_textarea').eq(0).addClass('hoge');

ちなみにですが、id指定は複数要素となる場合は使用しません(CSSの話になります)。
複数の要素に対して指定したい場合はclass指定をする必要があります。

$(document).ready(function() {
    // 一番目の要素にだけクラスを追加
    $('.svg_area').eq(0).addClass('hoge');
});
.svg_area {
    width: 100px;
    background: #aaccff;
}
.hoge {
    background: #ddaaee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="svg_area">aaa</div>
<div class="svg_area">aaa</div>
<div class="svg_area">aaa</div>

出典

Related Posts:

チェックボックス、jqueryのフィルタリング – jquery html5
質問: javascript: data=[ {"number":"4","shot":"3P","result":"成功"}, ...
ただのリスティング運用者がグーグルから次のように言われて何をすれば良いでしょうか? – jquery
質問: 皆さま、お世話になります。また予め御礼申し上げます。 HPをリニューアル致しました。そこで のような「機能していないリンク先」つまりプログラムに機能していないリンク先が有るよ、と言われ、広告とソースが連動せず広告が表示出来ないで困っているのですが、平気でプログラムのド素人さんに難しい事を言ってくるグーグルの社員さん達の言う通りにするには何をすれば良いのでしょうか?(尚、同時並行でホームページ業者にも依頼をしています。) グーグル社員さん曰く、HPに富んでCTR+SFT+Iキーを押せ。⇒Networksというところが有るからそこでクリックしながらF5キーを押せ。すると赤い文字が見えるのだろう。あれを修正すればいいんだよ。との事ですが、ど素人の私に何かアドバイス、ヒント、ずばりお答えでも頂けますと 幸いです。(下記F5キーを押した後の図) 質問者: Kentaro Tomono take88 F5キーを押した後の図、で 赤字になって部分ですが、ajax-loader.gif というファイルにアクセスしたけど、ファイルが見つからないよ、という意味のエラーです。 ajax-loader.gif というファイルをホームページのサーバーの 所定の場所にコピーすれば良いと思いますよ。 出典
どうしてこの状況でjQueryセレクタは効果がない? – javascript jquery
質問: <script> function show_button2(){ $('#demo').html('<button>Button 2</button>'); } </script> <button onclick="show_button2();">Button 1</button> <div id='demo'></div> 'Button 1'をクリックして, 下の'Button ...
ボタンクリック時にコンテンツのトップまでスクロールしたい – javascript jquery
質問: 左上にメニューを作って、特定の項目をクリックしたら、コンテンツのトップまでスクロールしていく内容を作りたいのですが、ボタンを押してもエラーが出てしまい、困っています。ご指摘いただきたいです。 また、簡潔に表示するために提案などがあれば勉強させていただきたいです。 お願いいたします。 左上のボタンを押した際にでたエラーです。 index.html:50 Uncaught TypeError: Cannot read property 'top' of undefined at HTMLSpanElement. (index.html:50) at HTMLSpanElement.dispatch (jquery.js:3) ...
jsの外部参照について – jquery
質問: htmlにjsを外部参照したいのですがページを更新してもjsが動きません。何が悪いのかを教えてもらえると助かります。 質問者: waku ソースを画像で貼っておられるので細部まで見えないのですが、 <script type="text/javascript" src="file:///Users/user.... とfileプロトコルのところ、"/"が3本入っているように見えます。2本にしたら動きませんか? jQuery を予め読み込んでいませんでした。読み込ませるようにすると動作するようになりました。 -- 質問者のコメントより 出典
jQuery のif文が上手くいきません。(訂正) – javascript jquery
質問: 仕事の合間なので時間がかかってしまいましたが、やっと編集できました! 現在、こんな感じです。↓ $(function(){ var duration=300; var duration2=500; $("#pc-page-box1").on("mouseover",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:0.6}, duration); }); $("#pc-page-box1").on("mouseout",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:1}, duration); }); $("#pc-page-box2").on("mouseover",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:0.6}, duration); }); $("#pc-page-box2").on("mouseout",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:1}, duration); }); $("#pc-page-box3").on("mouseover",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:0.6}, duration); }); $("#pc-page-box3").on("mouseout",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:1}, duration); }); $("#pc-page-box4").on("mouseover",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:0.6}, duration); }); $("#pc-page-box4").on("mouseout",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:1}, duration); }); $("#pc-page-box5").on("mouseover",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:0.6}, duration); }); $("#pc-page-box5").on("mouseout",function(){ $(this).find(".black-sheet").stop(true).animate({ opacity:1}, duration); }); }); $(function(){ var duration=300; $(document).on('click', '.leftBoxParent', function(){ $(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration); $(this).find('.leftBox').stop(true).animate({left:300}, duration); }); }); $(function(){ var duration=300; $(document).on('click', '.rightBoxParent', function(){ $(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration); $(this).find('.rightBox').stop(true).animate({right:300}, duration); }); }); body,td,th { font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", ...
jQuery初心者です。 – jquery
質問: jQueryに関して質問させてください。 下記Gナビをスクロールすると、ヘッダーの上部に固定するプログラミングをしています。 <nav class="g-nav"> <div class="nav-innner"> <ul class="g-nav-menu"> <li>HOME</li> <li>概要</li> <li>特長</li> <li>例</li> </ul> </div> </nav> 【jQuery】 $(function() { var gNav ...
引数部に「?」と「:」が多用されたコードの意味 – javascript jquery
質問: jqueryの初心者です。 まことに申し訳ありませんが、下の意味を教えていただけませんか? fields.eq( index + (event.shiftKey ? (index > 0 ? -1 : 0 ) : (index < total ? +1 : total ) ) ...
cordovaで画像編集できるPluginまたはJSを教えて下さい。 – javascript jquery onsen-ui
質問: タイトルの通りです。 cordova上で写真画像を編集できるPluginまたはJSを探しております。 以下の画像編集機能があるものが条件です。 画像切り取り ペンでのペインティング スタンプ貼り付け 画像のモザイク 画像のタグ付け もしご存知でしたらご教授ください。 よろしくお願いいたします。 質問者: Akinobu Yamamoto 自己回答します。 img.lyの「Photo Editor SDK for HHTML5」を見つけて実装してみました。 切り取りや回転、フィルター等の機能がありある程度使えそうです。 またある程度のカスタマイズができるようです。 詳細はこちら 出典
この動作をSwiperで実現したい – javascript jquery html
質問: 解決方法が不明なので質問いたしました。下記のリンクのスライダライブラリを使用して 実現したいスライドがあります。http://www.idangero.us/swiper/#.VpMcPRWLRsc その実現したいスライドは下記のサイトにあるようなものです。 ・メイン画像はスライド、クリックで変更できる ・その下に配置されたサムネイルからその画像を表示できるhttp://black-flag.net/devel/jQueryResponsiveFlickSlider/ Swiperでも似たような事は出来ているのですが、 Swiperのデモにあるようにサムネイルが動いてしまいます。 どなたかご教授願いますでしょうか。よろしくお願いします。 質問者: odaoka434 Kaku この様に大丈夫ですか var galleryTop = new Swiper('.gallery-top', { nextButton: '.swiper-button-next', ...
Using the javascript , jquery cookie – javascript jquery cookie
質問: ご教授お願いします。何をどう書けばいいですか? したいことは、 1,cookie一覧をページに表示し、 cookieがまだ何も保存されていなかった場合にはメッセージを表示したいです。 (例:"まだ保存されていません"のような) 2,最新順が一番上に表示されるようにしたいです、 現状はまだ保存されてない場合は真っ白な画面になってます 下記は登録画面でボタンが押されたら表示する処理のlist.htmlです <!DOCTYPE html> <html lang="ja"><head> <script src="/js/jquery.cookie.js" charset="euc-jp"></script> <script type="text/javascript" charset="utf-8"> $(function() { $(document).ready( function(){ var ss = $.cookie('favorite');` if ...
jQuery mobileでタブバーを実装したい – monaca jquery jquery-ui
質問: monacaのサンプルアプリのメモ帳にタブバーを実装したいです。(下に3つタブがついていてメモ帳アプリのトップ画面がタブの切り替え先にも表示され、メモ帳が1つのアプリに3つある感じ) 初心者なものでいろいろ調べてみたのですが、上手くタブバーとメモ帳を同じ画面に表示することができません。 回答のほどよろしくお願い致します。 質問者: otm TOP Pageの</section>のあとにナビゲーションバーをフッターとして追加してください。 <!-- TOP Page --> <div data-role="page" id="TopPage"> <header data-role="header" data-position="fixed" data-theme="c"> ...
スクロールバー表示の仕方について – javascript jquery onsen-ui
質問: OnsenUIとjQueryでハイブリッドアプリを作っておりますが、 検索リストのような画面でスクロールバーを表示したいのですが仕方が解りません。 ページの基本構造は以下の通りです。 <ons-navigator var="onsnav_search"> <ons-page ng-controller="ctrl_search.html"> <ons-toolbar style="height: 110px;" fixed-style></ons-toolbar> <div id="id-main"> <ul class="cs-ulh" id="ul-search"> <li></li><li></li>....<li></li> </ul> </div> </ons-page> </ons-navigator> OnsenUI側なのかjQuery側の問題なのかも不透明な状況ですが、 少なくともスクロールバーを明示的に無効にするような記述はありません。 ons-pageの中身はスクロール無効になるのかと疑って試してみましたが、 どうやらそうではないようです。そもそもスライディングメニューを実装 するためにはons-pageは必須と理解しております。 根本的な問題のような気もしているのですがアドバイス頂けますと大変幸いです。 質問者: user14318 iScroll5を使ってみてはどうでしょうか。 http://cubiq.org/iscroll-5 _iscroll = new IScroll(_$obj.get(0), { scrollbars: ...
php ajax , SyntaxError: Unexpected identifier – php jquery ajax
質問: したいことは:送信ボタンを押すとincludes/sync.phpのファイルが実行したいです。 説明: mysqlデータベースからphpでデータを取得して最新のid順で表示しています、それぞれのidにボタンを設置してデータを送信してphpファイルを実行していますが 下記のエラー出ていますが何が間違っていますでしょうか? id(1)からid(10)まで、ありますが最新のid(10)を押すと下記のエラーが出ますがその他のidのボタンを押しても反応が何もしないです!! なぜでしょうか?誰かがご教授お願いします。 説明補足:/* 下記の質問は、これをajaxで書き換えた場合のエラーです これは正しく動作しますが=> echo "送信";*/ 下記のエラー: SyntaxError: Unexpected identifier 1、下記の送信ボタンを上記のエラーが出ます echo "<td><a rel='$test_id' href='javascript:void(0)' id='sw'>送信</a></td>"; <script type="text/javascript" src="http://ajax.googleapi.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ ...
Ruby on Rails 上にて jQuery を利用した場合の値取得方法について – ruby-on-rails jquery
質問: テキストをクリックしたときに、背景の色を変更させるということをjQueryで行っております。 (下記テストページにてご確認頂けます) http://45.62.253.224/ html <p id='apple'>apple</p> <p id='banana'>banana</p> <p id='cake'>cake</p> <input type="submit" value="OK"> jQuery $(document).on('click','#apple',function(){ console.log($(this).css("background-color") ); if($(this).css('background-color')=='rgb(255, 0, 0)' ){ $(this).css({'background-color':'white','color':'black'}); }else{ ...

You Might Also Like

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です