为什么选择不正确呢？

时间：2022-05-16 20:12:48

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选中,我想更改输入的值和.readiness-circle的CSS背景颜色。我跑

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

并且它不起作用,实际上$ score_row.find('.readiness-circle')没有选择任何东西。我想知道运行$ score_row.find('input.completeness')。val(平均值)以某种方式搞砸了自身的背景?我糊涂了 ...

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.

编辑:地狱发生了什么?何时执行.remove()而不是.css('background-color',newcolor);,它们将被删除。所以它与选择器无关。

2 个解决方案

#1

0  

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.

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

#2

0  

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

#1

0  

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.

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

#2

0  

<!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>
标签：

相关文章