为什么选择不正确

Why isn't this selecting correctly?

本文关键字：不正确 选择 为什么      更新时间：2023-09-26

我有一些非常奇怪的事情发生，我无法弄清楚。

每当我有像

<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>

由$score_row选择，我想更改input的value和.readiness-circle的CSS background-color。我跑 

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

这行得通。

然后我跑 

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

它不起作用，实际上$score_row.find('.readiness-circle')不会选择任何东西。我想知道运行$score_row.find('input.completeness').val(average)是否会以某种方式搞砸本身的上下文？我很困惑...

编辑：这到底是怎么回事？当做.remove()而不是.css('background-color', newcolor);，它们被删除。所以它与选择器无关。

如果div 没有内容，则不会显示背景色。下面我有两行，一行有空格，一行没有。设置颜色仅影响包含内容的颜色。

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>

<!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>
相关文章：