Curingas nos seletores jQuery

669

Estou tentando usar um curinga para obter a identificação de todos os elementos cuja identificação começa com "jander". Eu tentei $('#jander*'), $('#jander%')mas não funciona ..

Eu sei que posso usar classes dos elementos para resolvê-lo, mas também é possível usar caracteres curinga?

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>

jquery jquery-selectors sizzle

— ziiweb
fonte

2

Esta é uma pergunta sobre o jQuery (ou mais exatamente o mecanismo Sizzle).

— Peter Örneholm 21/03/11

1

Apenas uma observação: seria muito mais rápido fazê-lo com classes, já que o jQuery ou o Sizzle podem usar as funções do navegador (embora não deva fazer muita diferença para os navegadores modernos).

— precisa

4

possível duplicata de seletor jQuery expressões regulares

— Robert MacLean

7

Além disso, uma coisa importante a ser observada é que $("[id*=jander]")selecionaria todos os elementos com um ID que contenha o jander da string.

— Gabriel Ryan Nahmias

1281

Para obter todos os elementos começando com "jander", você deve usar:

$("[id^=jander]")

Para conseguir aqueles que terminam com "jander"

$("[id$=jander]")

Consulte também a documentação do JQuery

— nico
fonte

22

Os documentos dão este exemplo:$('input[name^="news"]').val('news here!')

— Brenden

5

O código funciona como pretendido. Não há necessidade de aspas duplas, apenas aumenta as chances de faltar uma cotação de fechamento e a torna menos legível.

— Nico

4

@nico Curiosamente, os médicos dizem que ele trabalha com atributos e idé uma propriedade tecnicamente , mas acho que com as versões mais recentes do jquery (ou seja, 1.9) e como as últimas alterações nos atributos e propriedades são interrompidas, a linha está um pouco desfocada com relação aos dois e, portanto, você poderá usar os seletores de atributo para (pelo menos algumas) propriedades.

— johntrepreneur

E se, eu quiser selecionar o Even daqueles selecionados. por exemplo: atualmente tenho .col-lg-4:even div:nth-child(1)se quisesse fazer o mesmo .... o que escreveria? "[class^=.col-lg-]:even"? (Eu não parecem torná-lo trabalho)

— Luis Robles

Um pouco de comportamento que me surpreendeu ---- se eu usar isso com "classe $ = ...", ele pesquisará a lista de classes de um item, não os nomes de classes individuais. Portanto, somente ocorre se a classe que está sendo pesquisada for a última classe desse item. Não foram testados além do Chrome. E não tenho certeza se a falha está no jQuery ou nas minhas expectativas em relação ao jQuery.

— Roger Krueger

115

Como o título sugere curinga, você também pode usar isso:

$(document).ready(function(){
  console.log($('[id*=ander]'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>

Expandir snippet

Isso selecionará a string especificada em qualquer lugar do id.

— Martijn Smidt
fonte

39

Experimente o jQuery começa com

seletor, '^ =', por exemplo

[id^="jander"]

Eu tenho que perguntar, por que você não quer fazer isso usando aulas?

— GoatInTheMachine
fonte

2

Para adicionar contexto, estou procurando a mesma solução porque estou usando o Django, cuja classe ModelForm determina IDs baseadas em modelos e não parece permitir agrupamentos como este; ou seja, o HTML está fora do meu controle.

— Christian Mann

Isso é útil ao trabalhar com o ASP.Net WebForms, principalmente as listas de rádio e caixas de seleção.

— DavidScherer 14/05/19

35

para aulas você pode usar:

div[class^="jander"]

— l3thal
fonte

Não consegui fazer isso funcionar, recebi uma mensagem sobre sintaxe inválida.

— stian

14

Para obter o ID da correspondência curinga:

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>

Expandir snippet

— PJ Brunet
fonte

2

Em vez de "event.target.id" este trabalho poder também: $ (this) .attr ( "id")

— PJ Brunet

10

Quando você tem uma cadeia de caracteres de identificação mais complexa, as aspas duplas são obrigatórias.

Por exemplo, se você tem um ID como este id="2.2":, a maneira correta de acessá-lo é:$('input[id="2.2"]')

Na medida do possível, use aspas duplas, por razões de segurança.

— Eduard
fonte