How to change legend text without knowing the id?

0

I have a <legend>texto</legend> tag that does not 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 change the text of the first or the X% with% I tried with jquery to grab all the child items from the div Something like

$("#div1teste").childreen

Now I'm trying to create a class="test" in <legend> and try to recover it:

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

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

Example in Jsfiddler link

    
asked by anonymous 23.06.2016 / 18:54

3 answers

1

Scroll through all the elements and change the text as desired, eg:

$( "#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..<divid="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">
    
23.06.2016 / 20:22
1

Do not take an element with the "test" class back into it. Currently, list.getElementsByClassName("teste")[0] returns undefined in your code, since there is no other element with the "test" class inside it.

To invert this, change the line:

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

... for:

list.innerHTML = "Milk";
    
23.06.2016 / 19:00
0

As fiddle, you have already selected the "0" item for the teste class 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 have helped.

    
23.06.2016 / 19:05