CODEWITHSUNDEEP
jqueryhtml
JPG
JPG

Reputation: 1253

unable to understand find method works in jquery

I am a jquery beginner. I made a table below in html:

enter image description here

What I wanted to do was - show three alert boxes back to back for 3 checkboxes being found in my table so I did this:

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

    });
});

But instead I got 9 alert boxes. How can I navigate to tds which contains checkboxes only.

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>

Upvotes: 0

Views: 36

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Use length to test if element is present, right now you are testing if(object) which returns always 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>

or try the is() function

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

Upvotes: 4

rushil
rushil

Reputation: 576

Change your script to : 

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

      });
  });

There are 3 td in each tabclass so you get alert 3*3=9 times as you have used each function. so change your selector to your class

just change

tabclass td

to 

select

Upvotes: 1

Related Questions