質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16499questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6731questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryで複数のdatasetが設定された属性の取得方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 658
退会済みユーザー

退会済みユーザー

うまく検索できなかったので、こちらで質問させてください……
(不十分かもしれませんが、丸投げではないアピールです)

今、htmlの構成は、下記のようになっています。

<ul>
  <li data-a="データA", data-b="データ1", data-c="データX"></li>
  <li data-a="データA", data-b="データ2", data-c="データY"></li>
  <li data-a="データA", data-b="データ3", data-c="データZ"></li>
</ul>

このとき、

data-a の属性が データA かつ
data-b の属性が データ1 の場合の
data-c の属性を取得 (=ここでは、"データX")

したいのですが、jQueryを使用して、どのように記述すればいいですか?

ご教示のほど、よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

$( function() {
    let arr = [];
    $( '[data-a][data-b][data-c]' ).each( function() {
        let $_t = $( this );
        if ( $_t.data( 'a' ) === 'データA' && $_t.data( 'b' ) === 'データ1' ) {
            arr.push( $_t.data( 'c' ) );
        }
    } );
    console.log( arr );
} );

動くサンプル:https://jsfiddle.net/gpudx383/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/05 23:15

    サンプル確認しました。迅速な回答ありがとうございます!
    参考にさせていただきます。

    キャンセル

+2

条件に合致するものが必ずしも1つとは限りませんので注意が必要です

<ul>
  <li data-a="データA" data-b="データ1" data-c="データX"></li>
  <li data-a="データA" data-b="データ2" data-c="データY"></li>
  <li data-a="データA" data-b="データ3" data-c="データZ"></li>
  <li data-a="データA" data-b="データ1" data-c="データX2"></li>
</ul>


だとして、こうするとよいでしょう

 とりあえず、なにか1個ヒットすればいい場合

$(function(){
  var data_c=$('*').filter(function(){
      return $(this).data('a')=="データA" && $(this).data('b')=="データ1";
    }).data('c');
  console.log(data_c);
});

 全部取得する場合

$(function(){
  var data_c=$.map(
    $('*').filter(function(){
      return $(this).data('a')=="データA" && $(this).data('b')=="データ1";
    }),function(x){
      return x.getAttribute('data-c');
    });
  console.log(data_c);
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/06 00:02

    "全部取得する場合"のコードを解読してました。
    $.map(array, callback(value, index))の構文を使ってると考えると、
    arrayに当たるのが$('*').filter(function(){…})の部分で、
    callback(value, index)に当たるのが、function(x){…}の部分ですよね。

    arrayのほうでdatasetが'a'=="データA"の場合かつdatasetが'b'=="データ1"の場合を
    配列としてすべて取得して、filter(fn)で条件に当てはまらない要素を削除して……
    callback(value)に当たる部分、つまりxに取得した配列の先頭の要素が入って、
    data-cの属性を取得して変数data_cに配列として返してるのかな……

    間違えてたらすみません(´・ω・`)

    キャンセル

+2

 属性セレクタ (Attribute selectors)

解決していますが、別解を。

'use strict';
console.log(jQuery('[data-a="データA"][data-b="データ1"]').map((i, element) => element.dataset.c));
console.log(Array.prototype.map.call(jQuery('[data-a="データA"][data-b="データ1"]'), element => element.dataset.c));

セレクタについて勉強すると、コーディングの幅が広がります。

 jQuery#attr()

jQuery#attr() はインデックス0の属性値を返すので、先頭の要素の属性が欲しいのなら、attr() で十分といえます。

console.log(jQuery('[data-a="データA"][data-b="データ1"]').attr('data-c'));

 アロー関数

コード中、"=>"がどこを指しているのか、何の処理を行っているのかがよく分かりません。

=> はアロー関数の一部です。

先述のコードを「アロー関数」から通常の「関数式」に変更すると、次のコードになります。

'use strict';
console.log(jQuery('[data-a="データA"][data-b="データ1"]').map(function (i, element) { return element.dataset.c}));
console.log(Array.prototype.map.call(jQuery('[data-a="データA"][data-b="データ1"]'), function (element) { return element.dataset.c }));

Re: icicle さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/06 00:14

    前回に引き続き、回答ありがとうございます。

    セレクタについて、簡単に調べてみましたが、申し訳ありません。
    コード中、"=>"がどこを指しているのか、何の処理を行っているのかがよく分かりません。
    追加の質問となりますが、ご教示いただけると助かります。

    キャンセル

  • 2018/01/06 00:30

    > コード中、"=>"がどこを指しているのか、何の処理を行っているのかがよく分かりません。
    それは「アロー関数」というものです。
    attr() にも触れて、親記事に追記しておきました。

    キャンセル

  • 2018/01/06 00:54

    追加の解説ありがとうございました。セレクタとは似て非なるものだったんですね……
    関数式で説明されるとすんなり理解できました。とても分かりやすいです。
    Array.prototypeも初耳でした。ここまで柔軟に書かれるとRubyを彷彿としてしまいます(?)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    外部JSファイルの実行後に実行

    以下のようなコードで、セレクトボックスの変更によって、 ★の処理を実行したいのですが、 ページ最下部にある外部JSの処理が最後に行われてしまい、 ★の処理が完了後に外部JSの処理で

  • 解決済

    jqueryのdieとliveについて

    $(document).ready(function(){ $("#hogehoge").die("change"); $("#hogehoge").live("c

  • 受付中

    ページトップにスクロールできません

    実装したい内容・問題点 ・jQueryを用いてページの一番上までスクロールするボタンを作成したい ・https://syncer.jp/jquery-to-top-buttonやh

  • 解決済

    JQueryのアニメーションが上手くいかない

    実現したいこと JQueryで文字をfadeinさせたいです。 カルーセルの左右のインディケータをクリックすると、キャプション(画面中の文字)が浮かび上がってくるイメージです。

  • 解決済

    jQueryのafterメソッドなのですが

    afterを使ってhtmlのタグをつけるときに <script> var a = $(".after1"); a.after("<div class='test'></di

  • 解決済

    jQuery 2つのボタンのCSSを切り替える

    前提・実現したいこと jQueryを使用し、2つのボタンのCSSを切り替えたいと思っています。 現在のソースコードでは2つともONの状態にできるようになってしまい、if文の書き方が

  • 解決済

    親子関係のセレクタ指定方法

    下記のケースで#hogeから見た場合の.piyoをすべて指定したいのですが 動作致しません。 $('#hoge>.fuga>.bar').children('div').rem

  • 解決済

    jQueryの絞り込み検索(3つの条件 or検索)について

     前提・実現したいこと 画像を3つの条件(or検索)で表示したいと思っています。 2つの条件検索(#styleと#color)では問題なかったコードに、1つ条件(#size)を

同じタグがついた質問を見る

  • JavaScript

    16499questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6731questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。