Assign various elements different values using the same function

Question

See, I have 5 IDS(5 DOM elements) and accurate, using Jquery’s text() function, add to each of them a different text, I can do so..

$("#ID1").text("bla");

$("#ID2").text("blabla");

....

There is a smaller, simplified way to do this, if the texts were equal, you could comma the selectors, but they’re not..

I thought of something like:

.text(function() {
$("#ID1") = "bla";
$("#ID2") = "blabla";
});

Anyway, any suggestions, even for good practice and to keep the code simplified and clean.

Answer 1

  var addText = function(array, element){
         
        $(element).each(function(i){
            $(this).text(array[i]);
        }); 
    };
    
    $(function(){
      var array = [
          "meu primeiro texto",
          "Meu segundo Texto",
          "Meu terceiro texto",
          "E assim por diante",
       ];
     
        addText(array, '.CLASS');
    });


    addText(array, '[id^=ID]');

.CLASS{
  border:1px solid red;
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="CLASS"></div>
    <div class="CLASS"></div>
    <div class="CLASS"></div>
    <div class="CLASS"></div>
    <div class="CLASS"></div>

Answer 2

You can create a dictionary format object, where the keys are the Divs Ids, and the values are the respective texts. Then just scroll through the dictionary to fill out the Divs:

var textos = {
    "id1" : "bla",
    "id2" : "blabla",
    "foo" : "bar" // , etc
};
$.each(textos, function(chave, valor) {
   $('#' + chave).text(valor);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1"></div>
<div id="id2"></div>
<div id="foo"></div>