jQuery Wie finde ich ein Element basierend auf einem Datenattributwert?

Ich habe das folgende Szenario:

var el = 'li';

und es gibt 5 <li>auf der Seite mit jeweils einem data-slide=numberAttribut (Nummer ist 1,2,3,4,5) .

Ich muss jetzt die aktuell aktive Foliennummer finden, die var current = $('ul').data(current);bei jedem Folienwechsel zugeordnet und aktualisiert wird.

Bisher waren meine Versuche erfolglos und ich habe versucht, den Selektor zu erstellen, der der aktuellen Folie entspricht:

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

stimmt mit nichts überein / gibt nichts zurück…

Der Grund, warum ich das liTeil nicht fest codieren kann, ist, dass dies eine vom Benutzer zugängliche Variable ist, die bei Bedarf in ein anderes Element geändert werden kann, sodass es möglicherweise nicht immer eine ist li.

Irgendwelche Ideen, was mir fehlt?

Sie müssen den Wert von currentin einen Attribut-Gleichheits- Selektor einfügen :

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

Für ältere JavaScript-Umgebungen ( ES5 und früher):

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

Falls Sie das alles nicht eingeben möchten, haben Sie eine kürzere Möglichkeit, nach Datenattributen abzufragen:

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

Zu Ihrer Information: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

Achten Sie bei der Suche mit [data-x = ...] darauf, dass dies mit dem Setter jQuery.data (..) nicht funktioniert :

$('<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

Sie können dies stattdessen verwenden:

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

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

Ich habe die filterByData-Erweiterung von psycho brm auf jQuery verbessert .

Wenn die frühere Erweiterung nach einem Schlüssel-Wert-Paar gesucht hat, können Sie mit dieser Erweiterung zusätzlich nach dem Vorhandensein eines Datenattributs suchen, unabhängig von dessen Wert.

(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);

Verwendungszweck:

$('<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>

Oder die Geige: http://jsfiddle.net/PTqmE/46/

Ohne JQuery, ES6

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

Ich weiß, dass es sich bei der Frage um JQuery handelt, aber die Leser möchten möglicherweise eine reine JS-Methode.

Ich habe das gleiche Problem beim Abrufen von Elementen mit jQuery und dem data- * -Attribut festgestellt.

Als Referenz finden Sie hier den kürzesten Code:

Dies ist mein HTML-Code:

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

Dies ist mein jQuery-Selektor:

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

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

Ich hoffe das funktioniert besser

Vielen Dank

Dieser Selektor $("ul [data-slide='" + current +"']");funktioniert für folgende Struktur:

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

Während dies $("ul[data-slide='" + current +"']");funktioniert für:

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

Zurück zu seiner ursprünglichen Frage, wie dies funktioniert, ohne den Elementtyp im Voraus zu kennen, geschieht Folgendes:

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