How to set array or multiples var inside jquery .html() method?

Question

I've got a array with content [a,b,c] and I need to put it inside a .html()

and my original place its 3 child When i put it directly - this way:

$('#listProducts div ul li').html(newElements); (not esactly this code, but I short it)

whats happens (return like this [abc]):

<div id=listProducts>
<ul>
  <li>A,B,C</li>
  <li>A,B,C</li>
  <li>A,B,C</li>
</ul></div>

result i want:

<div id=listProducts>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul></div>

I tried this:

$('#listProducts ul li ul li div').html(function(newElements){

for(let i = 0; i < newElements.length; i++){ 
 newElements[i];
}

});

but i research about functions inside .html() and it seems only accept index parameters.

i think about something like

 $().html(newElements[0],newElements[1],newElements[2]) or
separe in 3 variables  $().html(element1,newElements2,newElements3) // but i guess its not possible with .html()

Is there a way to do that? Ps: I cant change the HTML, and i cant just send directly someting like <li> + newElements[i]; because its atached with backend parameters uniques with every div, ul, etc.

Its my first question at SO, and english is not my first language. So if a make any mistake, please advice me and I'll change. Thank you so much!!

Edit1:

testing:

.html(function(i) {
  return arr[i];
});

FULL CODE:

const arr = $('#listProducts ul li ul li div a').get().sort(function(a, b) {
  return a.getAttribute('href') > b.getAttribute('href') ? 1 : -1;
}).map(function(el) {
  return $(el).clone(true)[0];
});


$('#listProducts ul li ul li div').html(function(i) {
  return arr[i];
});

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

<body>
  <div id="listProducts" class="listagem borda-alpha ">
    <ul data-produtos-linha="3">
      <li class="listagem-linha ">
        <ul class="">
          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/2-test" class="produto-sobrepor" title="TEST 2">2TH ELEMENT</a>
              <div class="another 1">another div 1</div>
              <div class="another 2">another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/3-test" class="produto-sobrepor" title="TEST 3">3RD ELEMENT</a>
              <div class="another 1">another div 1</div>
              <div class="another 2">another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/1-test" class="produto-sobrepor" title="TEST 1">1st ELEMENT</a>
              <div class="another 1">another div 1</div>
              <div class="another 2">another div 2</div>
            </div>
          </li>

        </ul>
      </li>
    </ul>
  </div>

</body>

</html>

expected:

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

    <body>
      <div id="listProducts" class="listagem borda-alpha ">
        <ul data-produtos-linha="3">
          <li class="listagem-linha ">
            <ul class="">
              <li class="span4">
                <div class="listagem-item">
                  <a href="https://test.com/1-test" class="produto-sobrepor" title="TEST 1">1st ELEMENT</a>
                  <div class="another 1">another div 1</div>
                  <div class="another 2">another div 2</div>
                </div>
              </li>

              <li class="span4">
                <div class="listagem-item">
                  <a href="https://test.com/2-test" class="produto-sobrepor" title="TEST 2">2ND ELEMENT</a>
                  <div class="another 1">another div 1</div>
                  <div class="another 2">another div 2</div>
                </div>
              </li>

              <li class="span4">
                <div class="listagem-item">
                  <a href="https://test.com/3-test" class="produto-sobrepor" title="TEST 3">3RD ELEMENT</a>
                  <div class="another 1">another div 1</div>
                  <div class="another 2">another div 2</div>
                </div>
              </li>

            </ul>
          </li>
        </ul>
      </div>

    </body>

    </html>

ADD:

The .get().sort is to sort the results alphabetically, according to the URL and is working fine.
"another div 1" and "another div 2" are not the same as those "another div 1" and "another div 2" on the other li.
There are much more than 3 items.

Nick Parsons · Accepted Answer · 2020-08-30 09:10:48Z

1

If the <li> items are already in the <ul>, you can pass a function into .html() and use the index i it gives to access the content you want to place into each <li> like so:

const arr = ['A','B','C'];
$("#listProducts ul li").html(function(i) {
  return arr[i];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=listProducts>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

If the <li>s aren't already inside your <ul> you can map your arr to a list of elements, and then use .html() to add these elements to the <ul>:

const arr = ['A','B','C'];
$("#listProducts ul").html($.map(arr, function(text) {
  return $('<li>', {text});
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=listProducts>
  <ul>
  </ul>
</div>

EDIT:

You can get all the <li> and sort these by the anchor tags href attribute. You can then use .append() to append the sorted elements to your DOM. The purpose of using .append() rather than .html() is that .append() will insert the elements into the DOM, thus removing the old element and adding the new one (so no need to .clone())

const arr = $('#listProducts ul li ul li').get().sort(function(a, b) {
  const anchorA = $("a", a);
  const anchorB = $("a", b);
  return anchorA.attr('href') > anchorB.attr('href') ? 1 : -1;
});
$('#listProducts ul li ul').append(arr);

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

<body>
  <div id="listProducts" class="listagem borda-alpha ">
    <ul data-produtos-linha="3">
      <li class="listagem-linha ">
        <ul class="">
          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/2-test" class="produto-sobrepor" title="TEST 2">2TH ELEMENT</a>
              <div class="another 1">1. another div 1</div>
              <div class="another 2">1. another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/3-test" class="produto-sobrepor" title="TEST 3">3RD ELEMENT</a>
              <div class="another 1">2. another div 1</div>
              <div class="another 2">2. another div 2</div>
            </div>
          </li>

          <li class="span4">
            <div class="listagem-item">
              <a href="https://test.com/1-test" class="produto-sobrepor" title="TEST 1">1st ELEMENT</a>
              <div class="another 1">3. another div 1</div>
              <div class="another 2">3. another div 2</div>
            </div>
          </li>

        </ul>
      </li>
    </ul>
  </div>

</body>

</html>

edited Aug 30, 2020 at 9:10

answered Aug 30, 2020 at 6:44

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gabriela Wolff Over a year ago

Hi! Thank you for reply!! The items are already inside. So I tried the 1st code but it works only at the first element, and also ignores (but this error i was getting before) 2 another elements before the replaced element. Any Idea of why? I attach the full code to question. thanks again!!

Nick Parsons Over a year ago

@GabrielaWolff Hi, now that you've attached the full code can you please also show what your expected result will using the full HTML code that you provided?

Nick Parsons Over a year ago

Do you also want the content <div class="another 1">another div 1</div> to also move with the <a> tag? Or should each content div remain where they originally are?

Gabriela Wolff Over a year ago

Yes, I do. They match with each A.

Gabriela Wolff Over a year ago

Thank you so much @NickParsons!! That's exactly what I need! I couldn’t reach it without your help, and I really appreciate everything you’ve done. I don't even think about .append(). (Btw, the "3.,2.,1."(numerals, just the text) in your answer are out of order/doesn't match with urls. Doesn't makes any difference in code, but maybe can confuse any future reader. ) Thank you again!!

|

Collectives™ on Stack Overflow

How to set array or multiples var inside jquery .html() method?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related