Get the closest sibling of the data in a form

Question

Clicking the price with class "onward" should take the data "I want this data "

    <span class="onward">4518</span>
    <table>
      <tr>
        <td class="select_fly">
          <form>
            I want this data
          </form>
        </td>
      </tr>
    </table>

    $(document).on('click', '.onward', function(){
       var owner = $(this).closest('td').siblings('td.select_fly').html();
       console.log(owner);
    });

But for me owner is coming as "undefined" can anyone help me how to get data " I want this data"

Answer 1

Try the code.

$(document).on('click', '.onward', function(){
     var owner = $(this).next('table').find('td.select_fly').html();
console.log(owner);
});

Fiddle

Answer 2

You can use

var owner = $(this).next('table').find('td.select_fly').html();

So your JS will be :

  $(document).on('click', '.onward', function(){ var owner = $(this).next('table').find('td.select_fly').html(); alert(owner); }); 

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <span class="onward">4518</span> <table> <tr> <td class="select_fly"> <form> I want this data </form> </td> </tr> </table> 

If you want to have only the text, then

   var owner =  $(this).next('table').find('td.select_fly form').html();

This will give only

I want this data

Answer 3

You need to modify your javascript to:

$(document).on('click', '.onward', function(){
 var owner = $(this).next('table').find('form').html();
console.log(owner);
});

Please find a JSBin for the issue here