1

Eu tenho vários elementos cujo o id contêm, por exemplo, "elem", podem ser "%elem" ou "elem%", podem ter caracteres antes da String elem como depois ou antes e depois ("%elem%"). E gostaria de adicionar a todos os elementos que css com jQuery. Como posso selecionar todos os elementos que contêm "elem" no id?

2
  • Não seria melhor atribuir a mesma classe aos vários elementos que quer pegar? Ao invés de se basear em parte do nome de cada um?
    – Isac
    Commented 21/02/2018 às 11:24
  • @Isac isso é bom para quando voce quer fazer o css como por exemplo: input-bordered-white (usando -).
    – Marcelo
    Commented 21/02/2018 às 11:26

2 Respostas 2

4

Basta usar este seletor:

[id*="elem"] {
    height: 100px;
    width: 100px;
    background: black;
}
<div id="opa-elem-ops"></div>

Você pode dar uma olhada completa em: https://www.w3schools.com/cssref/css_selectors.asp

[attribute*="target"]  #TODO ATRIBUTO QUE TEM "TARGET", INDEPENDENTE DO LUGAR, SERÁ PEGO.
e
[attribute^="target"]  #TODO ATRIBUTO QUE COMEÇA COM "TARGET" SERÁ PEGO

São os que eu mais uso

Dica

Existe um conflito. Se você vai usar JQuery e CSS para estilizar sua página, você enfrentaria problemas, porque JQuery "normalmente" vem por último, daí você teria que decidir se iria usar apenas CSS para estilizar ou apenas JQuery. Mas você poderá fazer algo do tipo para evitar isso:

Usando o :not()

setTimeout(function(){
    $('[id*="elem"]:not([id*="elem1"])').css({
    background: 'dodgerblue',
    height: '100px',
    width: '100px'
  });
}, 1000);
[id*="elem1"] {
  background: black;
  width: 100px;
  height: 100px;
}
<!-- esse cara vai receber black do CSS, mas se não usar :not() em JQuery, o JQuery vai colocar dodgerblue em tudo que tem elem, porém não quero estilizar o elem1 -->
<div id="ops-elem-opa"></div>
<!--esse cara nao deveria receber dodgerblue do JQuery -->
<div id="ops-elem1-opa"></div>


<!--ignore-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://jsfiddle.net/thecodermarcelo/wbL50by6/9/

0

Um jeito simples de fazer isso, não necessariamente precisando vincular ao ID do elemento, seria atribuir uma classe, e utilizar o JQuery para realizar a mudança. Por exemplo $(".classe").css(...). E essa classe também pode ser utilizada tanto para atribuir propriedades, como também eventos (click, change, etc...)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .