无法理解find方法在jquery中有效

Question

我是jquery初学者。我在下面用html做了一个表：

我想要做的是 - 在我的桌子上找到3个复选框，背靠背显示三个警告框，所以我这样做了：

$(document).ready(function(){
    $("#but").click(function(){
        $(".tabclass td").each(function(i){
            if($(this).find("input[type='checkbox']")){
                alert("found");
            }
        });

    });
});

但我得到了9个警报框。如何导航到仅包含复选框的td。

HTML CODE：

<table border="1" class="tabclass">
    <tr>
        <th>select</th>
        <th>Name</th>
        <th>Address</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="selectCheck" class="select" id="ch1" value="1"/> </td>
        <td>Nitin</td>
        <td><select>
            <option>Gurgaon</option>
            <option>Noida</option>
            <option>Rohini</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="selectCheck" class="select" id="ch2" value="2"/> </td>
        <td>Abc</td>
        <td><select>
            <option>Gurgaon</option>
            <option>Noida</option>
            <option>Rohini</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="selectCheck" class="select" id="ch3" value="3"/> </td>
        <td>Xyz</td>
        <td><select>
            <option>Gurgaon</option>
            <option>Noida</option>
            <option>Rohini</option>
            </select>
        </td>
    </tr>
</table>
<br><br>
<button id="but">Test</button>

Answer 1

使用length来测试元素是否存在，现在你正在测试if(object)，它总是返回true

if($(this).find("input[type='checkbox']").length){
   alert("found");
}

$(document).ready(function() {
  $("#but").click(function() {
    $(".tabclass td").each(function(i) {
      if ($(this).find("input[type='checkbox']").length) {
        alert("found");
      }
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="tabclass">
  <th>select</th>
  <th>Name</th>
  <th>Address</th>
  <tr>
    <td class='check_cell'>
      <input type="checkbox" name="selectCheck" class="select" id="ch1" value="1" />
    </td>
    <td>Nitin</td>
    <td>
      <select>
        <option>Gurgaon</option>
        <option>Noida</option>
        <option>Rohini</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class='check_cell'>
      <input type="checkbox" name="selectCheck" class="select" id="ch2" value="2" />
    </td>
    <td>Abc</td>
    <td>
      <select>
        <option>Gurgaon</option>
        <option>Noida</option>
        <option>Rohini</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class='check_cell'>
      <input type="checkbox" name="selectCheck" class="select" id="ch3" value="3" />
    </td>
    <td>Xyz</td>
    <td>
      <select>
        <option>Gurgaon</option>
        <option>Noida</option>
        <option>Rohini</option>
      </select>
    </td>
  </tr>
</table>
<br>
<br>
<button id="but">Test</button>

或尝试is()功能

 if($(this).find('input').is("input[type='checkbox']")){
       alert("found");
    }

Answer 2

将您的脚本更改为：

  $(document).ready(function(){
      $("#but").click(function(){
          $(".select").each(function(i){
              if($(this).find("input[type='checkbox']")){
                  alert("found");
              }
          });

      });
  });

每个tabclass中有3个td，因此您可以使用每个函数获得警报3 * 3 = 9次。所以将你的选择器改为你的班级

只需更改

tabclass td

到

select