Frage jQuery Wie finde ich ein Element basierend auf einem Datenattributwert?


Ich habe folgendes Szenario:

var el = 'li';

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

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

Bis jetzt waren meine Versuche erfolglos und versuchten, den Selektor zu erstellen, der der aktuellen Folie entsprechen würde:

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

stimmt nicht überein / gibt nichts zurück

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

Irgendwelche Ideen, was ich vermisse?


824
2017-11-16 05:11


Ursprung


Antworten:


Sie müssen den Wert von injizieren current In ein Attribut entspricht Wähler:

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

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

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

1225
2017-11-16 06:30



Falls Sie all das nicht eingeben möchten, gibt es eine kürzere Möglichkeit, nach Datenattribut zu suchen:

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

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


383
2018-03-03 23:08



Wenn du mit [data-x = ...] suchst, pass auf, Es funktioniert nicht mit jQuery.data (..) Setter:

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

204
2018-03-27 03:59



Ich verbesserte mich psycho brms filterByData-Erweiterung zu jQuery.

Wo die Extension 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 seinem 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);

Verwendung:

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


35
2018-03-05 21:21



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

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

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.

22
2017-10-22 12:39



Zurück zu seiner ursprünglichen Frage, wie man dies ohne vorherige Kenntnis des Elementtyps machen kann, geschieht Folgendes:

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

11
2017-11-09 23:32



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

Ich hoffe, das funktioniert besser

Vielen Dank


11
2017-07-12 06:26



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

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

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

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


10
2017-09-30 15:08



Ohne JQuery, ES6

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

Ich weiß, dass die Frage über JQuery ist, aber die Leser wollen vielleicht eine reine JS-Methode.


5
2018-06-04 20:50