how to fetch nested elements in jquery

Question

Earlier in the day I got stuck with jquery's find method working. And now I am unable to fetch nested elements from my html table below:

what I am trying to do : on each checkbox selected columns i.e. select, I want to print values of siblings i.e. name and address but I am unable to do that. Below is my code:

$("#but").click(function(){
        $(".tabclass tr td input[type='checkbox']:checked").each(function(){
            var sibs=$(this).siblings("td");
            var v1=$(sibs[0]).text(); 
            var v2=$(sibs[1]).children[0].val();
            alert(v1+" & "+v2);
        });
});

HTML Code:

    <body>
  <table border="1" class="tabclass">
    <th>select</th>
    <th>Name</th>
    <th>Address</th>
    <tr>
      <td>
        <input type="checkbox" name="selectCheck" class="select" id="ch1" value="1" /> </td>
      <td><span class="name">Nitin</span></td>
      <td>
        <select name="address">
          <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><span class="name">Abc</span></td>
      <td>
        <select name="address">
          <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><span class="name">Xyz</span></td>
      <td>
        <select name="address">
          <option>Gurgaon</option>
          <option>Noida</option>
          <option>Rohini</option>
        </select>
      </td>
    </tr>
  </table>
  <br>
  <br>
  <button id="but">Test</button>
</body>

Sushanth -- · Accepted Answer · 2016-12-10 01:43:37Z

2

You have 2 issues with the code

You need the parent of the checked input before getting their siblings.

Change

var sibs=$(this).siblings("td");

to

var sibs=$(this).parent().siblings("td");

.children[0] gives you a DOM object, which does not have the val() method.

Replace

var v2=$(sibs[1]).children[0].val();

with

var v2 = $('select', sibs[1]).val(); OR  var v2=$(sibs[1]).children()[0].value;

Also use console.log instead of alert as the latter stops the thread on which the UI runs.

JS

$("#but").click(function() {
  $(".tabclass tr td input[type='checkbox']:checked").each(function() {
    var sibs = $(this).parent().siblings("td");
    var v1 = $(sibs[0]).text();
    var v2 = $('select', sibs[1]).val();
    alert(v1 + " & " + v2);
  });
});

Check Fiddle

edited Dec 10, 2016 at 1:43

answered Dec 10, 2016 at 1:29

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sushanth -- Over a year ago

@JSK Glad to have helped :)

Rajshekar Reddy · Accepted Answer · 2016-12-10 01:39:08Z

1

Problem: Is that the check box is child of td and it doesn't have any siblings. As per your this code var sibs=$(this).siblings("td"); it fetches nothing .

Solution: Is to go one level up to its parent ie:td and now this td has siblings. So use this code

var sibs=$(this).parent().siblings("td");

Also change $(sibs[1]).children[0].val();

To

$(sibs[1]).children('select').val();

edited Dec 10, 2016 at 1:39

answered Dec 10, 2016 at 1:33

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Collectives™ on Stack Overflow

how to fetch nested elements in jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related