Changing background color of element

Question

I have multiple td with the same class and I want to change the background color depending if they are In Progress or Completed...

The problem is that $('.isCompleted').text() gives me all the In progress (big string repeating the same thing)

and my code doesnt't work

Uncaught TypeError: isCompleted.text is not a function
    at HTMLTableCellElement. (list-flows.js:4)
    at Function.each (jquery-3.2.1.min.js:2)
    at HTMLDocument. (list-flows.js:3)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

$(document).ready(function () {
   var isCompletedRows = $('.isCompleted');
   $.each(isCompletedRows, function (index, isCompleted) {
       console.log(isCompleted.text());
       if(isCompleted.text() === "In Progress") {
           $(this).closest('tr').css('background-color','#000');
       }
       else if(isCompleted.text() === "Completed") {
           $(this).closest('tr').css('background-color','#555231');
       }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<c:forEach var="flow" items="${flows}">
  <tr class="flow-list">
    <c:if test="${flow.isCompleted == 1}">
      <td class="isCompleted">Completed</td>
    </c:if>
    <c:if test="${flow.isCompleted != 1}">
      <td class="isCompleted">In Progress</td>
    </c:if>
  </tr>
</c:forEach>

score 1 · Answer 1 · answered Jan 16 '18 at 16:14

1

because isCompleted is the DOM, not jQuery.

So you would need to do

$(isCompleted).text()

answered Jan 16 '18 at 16:14

epascarello

204,599
20
195
236

can you explain me what's the difference? I never understood that – Jan 16 '18 at 16:17
https://stackoverflow.com/questions/6974582/jquery-object-and-dom-element – epascarello Jan 16 '18 at 16:19
jQuery wraps the DOM elements with helper method. When you use each, it loops over the array of DOM elements. – epascarello Jan 16 '18 at 16:19

Changing background color of element

1 Answers1