web-dev-qa-db-ger.com

jFrage, wie man ein Element basierend auf einem Datenattributwert findet?

Ich habe folgendes Szenario:

var el = 'li';

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

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

Bisher waren meine Versuche erfolglos, den Selektor zu erstellen, der der aktuellen Folie entspricht:

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

passt nicht zu/gibt nichts zurück ...

Der Grund, warum ich den Teil li 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 nicht immer ein li sein kann.

Irgendwelche Ideen, was mir fehlt?

924
Jannis

Sie müssen den Wert von current in einen Attribute Equals Selektor einfügen:

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

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

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

für den Fall, dass Sie nicht alles eingeben möchten, haben Sie hier 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/

431
KevinDeus

Achten Sie bei der Suche mit [data-x = ...] darauf, dass nicht mit dem Setter jQuery.data (..) 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
215
psycho brm

Ich verbesserte die filterByData-Erweiterung von psycho brm auf jQuery.

Wenn die vorherige 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/

36
bPratik

Beim Abrufen von Elementen mithilfe von jQuery und data- * wurde dasselbe Problem festgestellt.

für Ihre Referenz ist der kürzeste Code hier:

Das 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.
29
user1378423

Ohne JQuery ES6

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

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

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

Ich hoffe das klappt besser

vielen Dank

14

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

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

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

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

13

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 + "']");
11
Bryan Garaventa