循环 Span 并找到最近的复选框-Java 学习之路

我有这个jquery需要遍历每一行，如果第四列是Pending，那么它应该禁用该复选框 .

我的jquery一直工作到循环，我不知道它为什么不进入if语句，我如何找到最接近的复选框？

HTML can't be edited. Platform restricted.

我尝试以相反的方式执行此操作，我将遍历复选框并找到具有“PENDING”值的最接近的 Span ，但它不起作用 .

$(document).ready(function() {
  $('#button').click(function() {
    var zoneObject = $('.cell').find('span');
    $(zoneObject).each(function() {
      var text = $(this).text().replace(/ /g, '');
      var pending = "Pending";
      // if text is pending then check box is disabled
      if (text === pending) {
        var chx = $(this).find(':checkbox');
        $(chx).prop("disabled", true);
      }
    });
  });
});

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

<body>
  <button id='button'>
    Click Me
    </button>
  <table id='table1'>
    <tbody>
      <tr class='und'>
        <td>
          <table>
            <tbody>
              <tr>
                <td class='cell'>
                  <input type='checkbox' />

                </td>
                <td class='cell'>
                  <span>
                      one
                    </span>

                </td>
                <td class='cell'>
                  <span>
                      233232
                    </span>

                </td>
                <td class='cell'>
                  <span>
                      Pending   
                    </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr class='und'>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <input type='checkbox' />
                </td>
                <td class='cell'>
                  <span>
                      one
                    </span>
                </td>
                <td class='cell'>
                  <span>
                      233232
                    </span>
                </td>
                <td class='cell'>
                  <span>
                      s
                    </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

2 回答

0

你必须改变以下两件事

1） . if (text === pending) //Here might be remains newline character thats why you have to use trim function to remove leading and trailing blank space

至

if ($.trim(text) === pending)

2） . var chx = $(this).find(':checkbox');

至

var chx =$(this).closest('tr').find(':checkbox');

DEMO

回复于 2024-05-18T15:01:48+08:00

而不是 replace 使用 trim 来删除字符串前后的空格 .

$(document).ready(function() {
  $('#button').click(function() {
    var zoneObject = $('.cell').find('span');
    $(zoneObject).each(function() {
      var text = $(this).text();
      text=text.trim();
      var pending = "Pending";
      // if text is pending then check box is disabled
      if (text == pending) {
        var chx = $(this).parent().parent().find(':checkbox');
        $(chx).prop("disabled", true);
      }
    });
  });
});

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

<body>
  <button id='button'>
    Click Me
    </button>
  <table id='table1'>
    <tbody>
      <tr class='und'>
        <td>
          <table>
            <tbody>
              <tr>
                <td class='cell'>
                  <input type='checkbox' />

                </td>
                <td class='cell'>
                  <span>
                      one
                    </span>

                </td>
                <td class='cell'>
                  <span>
                      233232
                    </span>

                </td>
                <td class='cell'>
                  <span>
                      Pending   
                    </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr class='und'>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <input type='checkbox' />
                </td>
                <td class='cell'>
                  <span>
                      one
                    </span>
                </td>
                <td class='cell'>
                  <span>
                      233232
                    </span>
                </td>
                <td class='cell'>
                  <span>
                      s
                    </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

回复于 2024-05-18T15:01:48+08:00

循环 Span 并找到最近的复选框

2 回答

相关问题