JS append not working when using a for loop-CodePudding

I have this code:

success: function (result) {
   var textoTipos = $('.cargarTextosTipo');
                      
   for (var selecttipos of textoTipos) {
       selecttipos.append(`<option value="0">Hello this is a test</option>`);

   // some code

   }

}

My problem is that inside loop selecttipos.append(`<option value="0">Hello this is a test</option>`); is not working and it is not appending to a select component but this way worked but this is not the way I am looking for:

 success: function (result) {
    var textoTipos = $('.cargarTextosTipo');
   textoTipos.append(`<option value="0" > Hello this is a test </option>`);

}

How do I make it work using a loop? this is the way I want because I have to go through each select node and do some stuff later rather than applying to all select stuff.

CodePudding user response：

When looping textoTipos you get plain HTML elements. You should wrap selecttipos to be jQuery object: $(selecttipos)

function success(result) {
   var textoTipos = $('.cargarTextosTipo');
                      
   for (var selecttipos of textoTipos) {
       $(selecttipos).append(`<option value="0">Hello this is a test</option>`);

   // some code

   }
}

$(document).ready(success);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select ></select>
<select ></select>
<select ></select>
<select ></select>