value - set id jquery




jQuery como encontrar um elemento com base em um valor de atributo de dados? (6)

Sem JQuery, ES6

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

Eu sei que a questão é sobre o JQuery, mas os leitores podem querer um método JS puro.

Eu tenho o seguinte cenário:

var el = 'li';

e há 5 <li> na página, cada um com um atributo data-slide=number (número sendo 1,2,3,4,5 respectivamente) .

Agora preciso encontrar o número do slide atualmente ativo que é mapeado para var current = $('ul').data(current); e é atualizado em cada alteração de slide.

Até agora, minhas tentativas não tiveram sucesso, tentando construir o seletor que corresponderia ao slide atual:

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

não corresponde / retorna nada…

O motivo pelo qual não posso codificar a parte li é que essa é uma variável acessível ao usuário que pode ser alterada para um elemento diferente, se necessário, portanto, nem sempre é um li .

Alguma idéia do que estou perdendo?


Ao pesquisar com [data-x = ...], atente, ele não funciona com o setter 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

Você pode usar isto em vez disso:

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

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

Este seletor $("ul [data-slide='" + current +"']"); vai trabalhar para a seguinte estrutura:

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

Enquanto este $("ul[data-slide='" + current +"']"); vai trabalhar para:

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


Eu enfrentei o mesmo problema ao buscar elementos usando o atributo jQuery e data- *.

então, para sua referência, o código mais curto está aqui:

Este é o meu código HTML:

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

Este é o meu seletor de jQuery:

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

Você tem que injetar o valor da current em um seletor Attribute Equals :

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

Para ambientes JavaScript mais antigos (ES5 e anteriores):

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

Voltando à sua pergunta original, sobre como fazer isso funcionar sem conhecer o tipo de elemento antecipadamente, o seguinte faz isto:

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




custom-data-attribute