É possível mudar alguns atributos de um elemento sem saber sua identificação? Exemplo:
Alterar o texto do span para outro qualquer do meu interesse.
Sim, de diversas formas, por exemplo em seu código:
Utilizando o find()
do jQuery para encontrar um elemento beaseado em outro:
$( "#panelFormula" ).find( "span" ).css( "background-color", "red" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panelFormula">
<div class="panel-heading">
<span>Fórmula da Critica</span>
</div>
</div>
Encontrando o elemento com base em seu conteúdo
$("span:contains(Fórmula da Critica)").css('background-color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panelFormula">
<div class="panel-heading">
<span>Fórmula da Critica</span>
</div>
</div>
Em relação a todos os elementos, encontrando o span
específico que você precisa
$( "span:nth-child(4)" ).css('background-color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panelFormula">
<div class="panel-heading">
<span></span>
<span></span>
<span></span>
<span>Fórmula da Critica</span>
</div>
</div>
Do que se trata tudo isso
Isso se trata de DOM (document object model); é a árvore de elementos que compõem o HTML; as técnicas acima são formas de encontrar com facilidade os elementos que você precisa para realizar suas tratativas, legal?
Esses artigos podem ser úteis também:
Baseado no seu código, você pode encontrar o span
em questão e alterar o texto usando o seletor:
$("#panelFormula > .panel-heading span").text("novo texto");
Exemplo:
$("#panelFormula > .panel-heading span").text("novo texto");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panelFormula">
<div class="panel-heading">
<span>Fórmula da Critica</span>
</div>
</div>
Não usaria $( "#panelFormula" ).find( "span" )
porque irá selecionar todos os span
que houver dentro da div#panelFormula
, e não apenas a que você quer. Isso porque você possui uma div.panel-body
que poderá ter outros span
, e o .find()
irá alterar também o texto desses outros span
que possam ter.
O seletor $("#panelFormula > .panel-heading span")
irá pegar o elemento .panel-heading
filho direto de #panelFormula
e buscar o span
dentro dele, que só existe um.
Como elemento com classes podem haver mais de um, é melhor ser mais específico no seletor. Se o elemento .panel-heading
for único dentro de #panelFormula
, você pode dispensar o sinal >
, que significa "filho direto", ficando:
$("#panelFormula .panel-heading span").text("novo texto");