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 Respostas
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>
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...)
input-bordered-white
(usando -).