jqueryで独自属性を使ってタグを操作する方法

このQ&Aのポイント
  • jqueryを使用して独自属性を使ったタグの操作方法について調べています。
  • 今回は、divタグの独自属性を使って要素を追加する方法について質問させていただきます。
  • 独自属性を識別するためには、data属性を使用することができます。
回答を見る
  • ベストアンサー

jqueryにて、独自属性を使ってタグを操作したい

皆様 いつもお世話になります。 早速ですがご質問させていただきます。 現在、独自属性を使った学習をしております。 jqueryでidを使って以下のタグの「追加位置」に「追加要素」を挿入すると 以下のようになると思いますが、 <div id="aaa"> <!--追加位置--> </div> $(div#aaa).prepend("追加要素"); 独自属性を使って、同じことをしようとする際、idを識別するのに「#」を使うと思いますが、独自属性はどういう識別子(★にあたる箇所)を使うのでしょうか? div data-hoge="aaa"> <!--追加要素--> </div> var dokuji = $('div').attr('data-hoge'); $(★dokuji).prepend("追加要素"); お詳しい方ご教授のほど宜しくお願い致します。 開発環境: Dreamweaver CC Firefox 34.0.5

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

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

属性のセレクタが用意されていますので、それで対応可能かと思います。  http://api.jquery.com/attribute-equals-selector/ でも、独自属性を作らなくても、大抵のことなら通常のクラス設定で対応できるように思います。CSSでの指定なども考え合わせるとその方が便利ではないのかな・・・

takachipo
質問者

お礼

>http://api.jquery.com/attribute-equals-selector/ ありがとうございます! >でも、独自属性を作らなくても、大抵のことなら通常のクラス設定で対応できるように思います。CSSでの指定なども考え合わせるとそ>の方が便利ではないのかな・・・ おっしゃるとおり独自属性を使わなくても対応できました。 お世話になりました^^

関連するQ&A

  • jQueryのカスタムデータ属性追加について

    いつもこちらでお世話になっています。 jQueryでカスタムデータ属性(data-*)を新規追加するにはどう記述すれば良いのでしょうか。 html側にはカスタムデータ属性が未設定の状態です。 以下の方法で試してみましたが、カスタムデータ属性を取得すると「NaN」となっています。 【html】  <div id='hoge'>hogehoge< /> 【jQuery】  $(#hoge).attr({ 'data-a': 'A', 'data-b': 'B' }); よろしくお願いいたします。

  • JQueryのセレクタ

    jqueryでセレクタの取得をしたいのですがうまくいきません div要素の中のspan要素を取得したいのですがclassで取得すると重いのでid属性で場所を限定してからclass属性で絞り込みたいです こんな感じにしたらだめでした $("#hoge.foo").html('ほげ'); html <div id=hoge> <span class=foo></span> </div>

  • jQueryで同じid属性が複数あった場合の制御

    jQueryの勉強中ですが、ちょっと躓いています。 ブロック要素の中に、同じid属性をもつ要素があった場合 二つ目の要素のみを削除するにはどうしたらようでしょうか? 下記のようなイメージです。 <div id="test"> <p id="aaa"></p> <p id="bbb"></p> <p id="ccc"></p> <p id="aaa"></p> ←2個目の要素は削除(または非表示)にしたい。 </div> かなり困ってます・・・わかる方 教えていただけると助かります。

  • jQueryの属性フィルタにつきまして

    以下の部分のjQueryの属性フィルタで指定する方法がわかりません。 <div style="text-align: left; margin-left: 0px;"> ほげほげ </div> jQuery('div[style="text-align: left; margin-left: 0px;"]').css("display","none"); ってのは、どこかおかしいと思うのですが、 [attribute=value]というルールに沿うとこういった指定になります。 そもそも、style属性の場合は、属性フィルタは使えないのでしょうか。 あるいは、CSSのvalueまで判別させる場合は、この記述は無理なのでしょうか。 name="hoge" とかなら容易に指定できて効くのですが。。。 素人質問で恐縮ですが、 ご教授いただけると助かります。 参考になるページでも構いません。 どうぞよろしくお願いします。

  • Jqueryのセレクタ範囲について

    お世話になります。 【Jquery】 $("#aaa").click(function(){ $(this).css("opacity","1"); }); 【HTML】 <div id="aaa"> <p>hogehoge</p> <p>hogehoge</p> <input type="text" name="hoge"> </div> <div id="aaa"> <p>hoge2hoge2</p> <p>hoge2hoge2</p> <input type="text" name="hoge2"> </div> 上記の2つのdivでそれぞれのdiv内をクリックするれば、そのdiv内のみCSSが適用されるのですが、inputをおした時は発火しないようにすることはできますでしょうか? $("#aaa").not(":input") としてみたのですが、$(this)の値が変わるためDIVが変化しなくなりました。 反対に「$(this).css」を「 $("div#aaa").css」にすると2つのDIVに同時に適用されてしまいます。 何か良い方法がありましたらよろしくお願い致します。 ※子要素であれば$(this)の下に「.find('input~)」と加えて行けばいいと思うのですか上に遡るにはどのような方法がよいのでしょうか?

    • ベストアンサー
    • PHP
  • 終了タグのコメントとしての属性

    こんにちは。 自称html中級者です。 htmlの終了タグについて質問があります。 【質問内容】 1. 終了タグにコメントとして属性をつける事の是非 2. 是の場合、その条件・理由・根拠 3. 非の場合、その条件・理由・根拠 【条件】 解析、生成、その他ツールは使用しない 【経緯】 現在、社内HPのメンテを行っております。 タグの要素が長く開始~終了が分かり辛い場合は、何らかの終了コメントをつける事が多いと思います。 例 (直前に付ける場合) <div id="hoge"> ... <!-- hoge --></div> それを見ていて気になったのですが、上記例を次のように、終了タグ内に属性として埋め込むのは如何なものでしょうか? 例 (属性名fooとする場合) <div id="hoge"> ... </div foo="hoge"> 終了タグに余計な物を入れるのが良くないのは承知しています。 が、その理由について深く述べられている記載がなかったので質問に至りました。 以上です。 ご教示よろしくお願いします。

  • JQueryでxmlns属性(セミコロン:)付きの要素にアクセスする

    JQueryでxmlns属性付きの要素にアクセスする方法がわかりません。 <tag:hoge>text</tag:hoge> のようなタグにアクセスしたいのですが、 find("tag") find("tag:hoge") find("hoge") のいずれでもアクセスできずこまってます。 よろしくお願いします。

  • jQueryの隣接セレクターが上手く動作しない

    jQueryを用いてギャラリーのページを作成しています。 ページのイメージは上部にサムネイル画像が並べてあり、その下にクリックされたサムネイル画像に対応する大きな画像を表示するというものです。その中で隣接セレクターが上手く動作せず悩んでいます。どなたか教えていただきたく、よろしくお願いいたします。 具体的には HTML部分 <\-- サムネイル部分 --> <div id="navi"> <ul> <li> <a href="images/img1.jpg"><imgsrc="images/img1_thum.jpg" alt="作品1" /></a>  </li> : : </ul> </div> <\-- 大きな画像表示部分 --> <div id="main"> <img src="とりあえず最初の作品のパス" alt="最初の作品"/> </div> jQuery部分 $(function(){ $("#navi a").click(function(){ var filename=$(this).attr("href"); var altname=$("+img",this).attr("alt"); : : ここで、filenameには a要素のhref属性の値が入るのですが、altnameが undefined になってしまいます。 私は $("+img",this).attr("alt");  で  this (この場合はa要素)の次のimg要素のalt属性 (たとえば「最初の作品」)が返ると考えているのですがなにが間違っているのでしょうか?

  • iframe内からjQueryで指定したい

    jQueryのparentで親要素のIDを収得したいのですが、iframe内から、 読み込み元のHTMLを.parent()で追っていくと、取得できません。 jQuery("div#main iframe").contents().find('body').click(function(){ var hoge = jQuery(this).parent().parent().attr("id"); alert(hoge); }); .parent()では読み込み元のHTMLをまでいけないようなんですが、jQueryでは取得できないのでしょうか。 他にiframeから親を取得する記述があるのでしょうか。 アドバイスいただけると助かります。 拙い説明で恐縮ですが、どうぞよろしくお願いします。 こちら↓の板が閉鎖されるのを知らずにポストしていまい、 http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi 解決の見込みがなさそうですで、改めてこちらでお尋ねしています。 ややマルチ気味で恐縮ですが、ご容赦ください。

  • HTMLタグに独自属性を追加?

    Webアプリに関する質問ですが、HTML規約に関係ありそうなことなので、こちらで質問させていただきます。 サーバサイドスクリプトを使ってHTMLに値を埋め込み、その値をJavascriptで使用する場合、<input type="hidden">なタグを使うのはよくある話ですが、最近、HTML生成量を減らすためかどうかはわからないのですが、タグに独自属性を追加しているケースが見られます。 <ul class="movie-incoming"> <li data-id="201254" data-status="ordered">プロメテウス</li> <li data-id="201255" data-status="unordered">ロック・オブ・エイジズ</li> <li data-id="201258" data-status="unordered">漆黒の闇で、パリに踊れ</li> </ul> コード量は小さいし、jQueryでli要素の中にクリックイベントを仕込み、イベントハンドラで、$(this).attr("data-id")などとやれば簡単に設定値を得ることができるので、非常に賢いやり方だと思っています。 問題は、このような記述方法がHTML的に正しいのか、という点と、すべてのブラウザで対応できるのか、ということです。 モバイル用のjQueryMobileなどでもさかんに使われているようですが、どうなんでしょうか?

    • ベストアンサー
    • CSS