Home Ask Login Register

Developers Planet

Your answer is one click away!

Subpar Web Dev February 2016

Why isn't this selecting correctly?

I have something very strange going on and I can't figure it out.

Whenever I have row like

<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle"></div></td>
</tr>

selected by $score_row and I want to change the the value of the input and the CSS background-color of the .readiness-circle. I run

$score_row.find('input.completeness').val(average);

and that works.

Then I run

$score_row.find('.readiness-circle').css('background-color', newcolor);

and it doesn't work and in fact $score_row.find('.readiness-circle') doesn't select anything. I'm wondering does running $score_row.find('input.completeness').val(average) somehow screw up the context of the itself? I'm confused ...

EDIT: What the Hell is going on here? When do .remove() instead of .css('background-color', newcolor);, they are removed. So it doesn't have to do with the selector.

Answers


epascarello February 2016

If the div has no content, the background color will not appear. Below I have two rows, one with a space in it and one without. Setting the color only affects the one that has content.

var $score_row = $("tr");
average = 80;
newcolor = "yellow";

$score_row.find('input.completeness').val(average);
$score_row.find('.readiness-circle').css('background-color', newcolor);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle"></div></td>
</tr>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle">&nbsp;</div></td>
</tr>  
</table>


Shriya R February 2016

<!DOCTYPE html>
<html lang="en">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<script>
    $(document).ready(function () {


        $('tr.bold-and-caps').click(function () {
            $(this).find('.completeness').val('1111111');
            $(this).find('.readiness-circle').css('background-color', 'red');
        });
    });


</script>



<body>

   <table>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle">hello</div></td>
</tr>
<tr class="bold-and-caps">
    <td>Score</td>
    <td>Partner planning</td>
    <td><input type="text" class="completeness avg" value="0.0" disabled="disabled"></td>
     <td><div class="readiness-circle">hello</div></td>
</tr>  
</table>
</body>
</html>

Post Status

Asked in February 2016
Viewed 3,914 times
Voted 13
Answered 2 times

Search




Leave an answer


Quote of the day: live life