jQuery hoe een element te vinden op basis van een data-attribuutwaarde?

Ik heb het volgende scenario:

var el = 'li';

en er zijn 5 <li>‘s op de pagina, elk met een data-slide=numberattribuut (getal is 1,2,3 ,4,5 respectievelijk).

Ik moet nu het momenteel actieve dianummer vinden dat is toegewezen aan var current = $('ul').data(current);en wordt bijgewerkt bij elke diawisseling.

Tot nu toe zijn mijn pogingen niet gelukt om de selector te maken die overeenkomt met de huidige dia:

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

komt niet overeen/retourneert niets

De reden dat ik het li-gedeelte niet hard kan coderen, is dat dit een voor de gebruiker toegankelijke variabele is die indien nodig kan worden gewijzigd in een ander element, dus het hoeft niet altijd een li.

Enig idee over wat ik mis?

Antwoord 1, autoriteit 100%

Je moet de waarde van currentinjecteren in een Kenmerk is gelijk aan -kiezer:

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

Voor oudere JavaScript-omgevingen (ES5en eerder):

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

Antwoord 2, autoriteit 32%

Voor het geval u dat niet allemaal wilt typen, hier is een kortere manier om te zoeken op gegevenskenmerk:

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

Ter info:
http://james.padolsey.com/javascript/a- better-data-selector-for-jquery/

Antwoord 3, autoriteit 15%

Als u zoekt met [data-x=…], pas op, het werkt niet met 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

Je kunt dit in plaats daarvan gebruiken:

$.fn.filterByData = function(prop, val) {
    return this.filter(
        function() { return $(this).data(prop)==val; }
    );
}
$('<b>').data('x', 1).filterByData('x', 1).length
> 1

Antwoord 4, autoriteit 4%

Zonder JQuery, ES6

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

Ik weet dat de vraag over JQuery gaat, maar lezers willen misschien een pure JS-methode.

Antwoord 5, autoriteit 2%

Ik heb psycho brm’s filterByData-extensieverbeterd naar jQuery.

Waar de vorige extensie zocht op een sleutel/waarde-paar, kunt u met deze extensie bovendien zoeken naar de aanwezigheid van een data-attribuut, ongeacht de waarde ervan.

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

Gebruik:

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

Antwoord 6, autoriteit 2%

Ik heb hetzelfde probleem ondervonden bij het ophalen van elementen met jQuery en data-* attribuut.

dus voor uw referentie is de kortste code hier:

Dit is mijn HTML-code:

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

Dit is mijn jQuery-kiezer:

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

Antwoord 7

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

Ik hoop dat dit misschien beter werkt

bedankt

Antwoord 8

Deze selector $("ul [data-slide='" + current +"']");werkt voor de volgende structuur:

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

Terwijl deze $("ul[data-slide='" + current +"']");werkt voor:

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

Antwoord 9

Teruggaand op zijn oorspronkelijke vraag, over hoe dit te laten werken zonder het elementtype van tevoren te kennen, doet het volgende dit:

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