web-dev-qa-db-ja.com

どのようにデータ属性値に基づいて要素を見つけるのですか？

次のようなシナリオがあります。

var el = 'li';

ページには5つの<li>があり、それぞれdata-slide=number属性 （それぞれ1,2,3,4,5）を持っています 。

var current = $('ul').data(current);にマップされていて、スライドが変わるたびに更新される、現在アクティブなスライド番号を見つける必要があります。

これまでのところ、私の試みは失敗し、現在のスライドにマッチするセレクターを構築しようとしています。

$('ul').find(el+[data-slide=+current+]);

何にもマッチしない／何も返さない…

li部分をハードコードできないのは、これはユーザーがアクセスできる変数であり、必要に応じて別の要素に変更できるため、必ずしもliとは限らないためです。

私が欠けているものについて何かアイデアはありますか？

jqueryjquery-selectorscustom-data-attribute
905
Jannis

currentの値を Attribute Equals /セレクタに挿入する必要があります。

$("ul").find(`[data-slide='${current}']`)

古いJavaScript環境（ES5以前）の場合

$("ul").find("[data-slide='" + current + "']");
1336
Frédéric Hamidi

これらすべてを入力したくない場合は、data属性で照会するためのより短い方法があります。

$("ul[data-slide='" + current +"']");

参考： http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/ /

416
KevinDeus

[data-x = ...]で検索するときは、気を付けて、 jQuery.data（..）セッターでは動作しません ：

$('<b data-x="1">'  ).is('[data-x=1]') // this works
> true

$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false

$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true

代わりにこれを使うことができます：

$.fn.filterByData = function(prop, val) {
    return this.filter(
        function() { return $(this).data(prop)==val; }
    );
}

$('<b>').data('x', 1).filterByData('x', 1).length
> 1
210
psycho brm

psycho brmのfilterByData拡張 をjQueryに改良しました。

前者の拡張機能がキーと値のペアを検索する場合、この拡張機能を使用すると、その値に関係なく、データ属性の存在をさらに検索できます。

(function ($) {

    $.fn.filterByData = function (prop, val) {
        var $self = this;
        if (typeof val === 'undefined') {
            return $self.filter(
                function () { return typeof $(this).data(prop) !== 'undefined'; }
            );
        }
        return $self.filter(
            function () { return $(this).data(prop) == val; }
        );
    };

})(window.jQuery);

使用法：

$('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
$('<b>').data('x', 1).filterByData('x').length       // output: 1

// test data
function extractData() {
  log('data-prop=val ...... ' + $('div').filterByData('prop', 'val').length);
  log('data-prop .......... ' + $('div').filterByData('prop').length);
  log('data-random ........ ' + $('div').filterByData('random').length);
  log('data-test .......... ' + $('div').filterByData('test').length);
  log('data-test=anyval ... ' + $('div').filterByData('test', 'anyval').length);
}

$(document).ready(function() {
  $('#b5').data('test', 'anyval');
});

// the actual extension
(function($) {

  $.fn.filterByData = function(prop, val) {
    var $self = this;
    if (typeof val === 'undefined') {
      return $self.filter(

        function() {
          return typeof $(this).data(prop) !== 'undefined';
        });
    }
    return $self.filter(

      function() {
        return $(this).data(prop) == val;
      });
  };

})(window.jQuery);


//just to quickly log
function log(txt) {
  if (window.console && console.log) {
    console.log(txt);
    //} else {
    //  alert('You need a console to check the results');
  }
  $("#result").append(txt + "<br />");
}
#bPratik {
  font-family: monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="bPratik">
  <h2>Setup</h2>
  <div id="b1" data-prop="val">Data added inline :: data-prop="val"</div>
  <div id="b2" data-prop="val">Data added inline :: data-prop="val"</div>
  <div id="b3" data-prop="diffval">Data added inline :: data-prop="diffval"</div>
  <div id="b4" data-test="val">Data added inline :: data-test="val"</div>
  <div id="b5">Data will be added via jQuery</div>
  <h2>Output</h2>
  <div id="result"></div>

  <hr />
  <button onclick="extractData()">Reveal</button>
</div>

またはフィドル： http://jsfiddle.net/PTqmE/46/

35
bPratik

私はjQueryとdata- *属性を使用して要素を取得中に同じ問題に直面しています。

参考までに、最短のコードは次のとおりです。

これは私のHTMLコードです：

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

これは私のjQueryセレクタです。

$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.
28
user1378423

JQueryなし、ES6

document.querySelectorAll(`[data-slide='${current}']`);

私は質問がJQueryに関するものであることを知っていますが、読者は純粋なJSメソッドが欲しいかもしれません。

18
rap-2-h
$("ul").find("li[data-slide='" + current + "']");

これがもっとうまくいくことを願っています

ありがとう

12
Jomin George Paul

このセレクタ$("ul [data-slide='" + current +"']");は次のような構造に機能します。

<ul><li data-slide="item"></li></ul>

これは$("ul[data-slide='" + current +"']");のために働くでしょうが：

<ul data-slide="item"><li></li></ul>

11
Matas Vaitkevicius

要素の種類を事前に知らずにこの機能を実行する方法についての彼の最初の質問に戻ります。

$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");
11
Bryan Garaventa