How to change text of <Legend> without knowing the id?

Asked

Viewed 290 times

0

I have a tag <legend>texto</legend> that I don’t have Id and can have several on one page, I would like to change based on the ID of the previous div

ex:

<div id="div1teste">
  <fieldset>
    <legend>texto</legend>
</div>
<div id="div2teste">
  <fieldset>
    <legend>texto</legend>
  </fieldset>
</div>  </fieldset>

I would like to amend the text of the first or the X <legend> I tried with jquery to get all the children items from div Something like

$("#div1teste").childreen

Now I’m trying to create a class="test" on <legend> and try to get him back:

document.getElementsByClassName("teste")[0];

But both to no avail. NOTE: I just can’t insert id in this <legend> because this whole page is created dynamically and it would be a little complex to put Id on it.

Example in Jsfiddler https://jsfiddle.net/dorathoto/8yks4e5j/

javascript jquery
  • 1

    You can browse all the elements and exchange the texts as you wish, see if this helps: https://jsfiddle.net/8yks4e5j/2/

  • abfurlan, show, best way, already traverse by everyone, great..

  • @abfurlan and if I wanted to split into 2 types, see https://jsfiddle.net/dorathoto/8yks4e5j/3/ for one to change only one Legend type and the other Legend would be possible?

  • 1

    Scroll through the child elements of each div like this: https://jsfiddle.net/8yks4e5j/4/

  • I posted it in response, since it helped you can help other people :)

3 answers

1

Do not take an element with the "test" class again inside it. Currently, the list.getElementsByClassName("teste")[0] returns Undefined in its code, since there is no other element with the "test" class within it.

To reverse this, change the line:

list.getElementsByClassName("teste")[0].innerHTML = "Milk";

... for:

list.innerHTML = "Milk";

1


Go through all the elements and change the text as you wish, example:

$( "#alterarEnvolvido" ).click(function() {
    //percorre todos os elementos legend filhos da div #div_1Envolvido
	$.each($('#div_1Envolvido legend'),function(index){
  	$(this).text('Envolvido :' + index);
  });
});
$( "#alterarVeiculo" ).click(function() {
	$.each($('#div_Veiculos legend'),function(index){
  	$(this).text('Veiculo :' + index);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Envolvidos..
<div id="div_1Envolvido">
<button type="button" onclick="removeEnvolvidos('div_1Envolvido')" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <div class="form-horizontal">
        <fieldset>
            <legend class="teste">Envolvidos </legend>
        </fieldset>
         <fieldset>
            <legend class="teste">Envolvidos </legend>
        </fieldset>
         <fieldset>
            <legend class="teste">Envolvidos </legend>
        </fieldset>
    </div>
       </div>
       <hr>
       Veiculos...
       <div id="div_Veiculos">
<button type="button" onclick="removeEnvolvidos('div_1Envolvido')" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <div class="form-horizontal">
        <fieldset>
             <legend class="teste">Veiculo </legend>
        </fieldset>
                <fieldset>
             <legend class="teste">Veiculo </legend>
        </fieldset>
                <fieldset>
             <legend class="teste">Veiculo </legend>
        </fieldset>
    </div>
       </div>
       <hr>
       <input type="button" id="alterarEnvolvido" value="Alterar Envolvido 01">
          <input type="button" id="alterarVeiculo" value="Alterar Veiculos 01">

0

As the fiddle, you have already selected the item "0" for the class teste and assigned the variable list. No need to select again.

var list = document.getElementsByClassName("teste");
list[0].innerHTML = "Milk";
list[1].innerHTML = "Chocolate";

Or, directly:

document.getElementsByClassName("teste")[0].innerHTML = "Milk";
document.getElementsByClassName("teste")[1].innerHTML = "Chocolate";

I hope I’ve helped.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.