Dowemo


Question:

I have a table with several rows and this is how one of the rows look like:

<tr>


    <td>


        <div class="entry_karma" id="entry_karma_9">


            <h4>4</h4>


        </div>



        <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">


            <span class="glyphicon glyphicon-arrow-up"></span>


        </button>



        <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">


            <span class="glyphicon glyphicon-arrow-down"></span>


        </button>



    </td>


    <td>Hello</td>


    <td>2014</td>


</tr>


I want to get the value of the div inside the first td in this tr. I have buttons in the same td and when I click them I go to a function and I need access to the row in that function.

I have tried the following

console.log($(this).closest("tr"));


console.log($(this).closest("tr").find(".div"));


but I keep getting

[prevObject: m.fn.init[1], context: undefined]


I want to access to this row and the access to the previous and next row as well but I am not able to see where I'm going wrong here.

Thank you.


Best Answer:


You can use a parent-child selector in jQuery that includes the element and the class:

var child = $('td > .entry_karma');


child now equals <h4>4</h4> where you can then retrieve the html and get 4

To get the parent <tr> element you can use the jQuery .has() selector using the same variable in the above var child = * snippet :

var child = $('td > .entry_karma');



console.log(child.html());



// get parent tr


var parent = $('tr').has(child);



console.log(parent.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>


  <tr>


    <td>


      <div class="entry_karma" id="entry_karma_9">


        <h4>4</h4>


      </div>



      <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">


        <span class="glyphicon glyphicon-arrow-up"></span>


      </button>



      <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">


        <span class="glyphicon glyphicon-arrow-down"></span>


      </button>



    </td>


    <td>Hello</td>


    <td>2014</td>


  </tr>


</table>

Or, if the value is always going to be nested in the <h4> tag, you can access it directly like this:

var val = $('td > .entry_karma > h4').html();


var val = $('td > .entry_karma > h4').html();


console.log(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>


      <tr>


        <td>


          <div class="entry_karma" id="entry_karma_9">


            <h4>4</h4>


          </div>



          <button type="button" class="btn btn-default btn-md" id="vote_up_9" name="vote_up_9" onclick="vote(9, 'up', 1, 8);" disabled="disabled">


            <span class="glyphicon glyphicon-arrow-up"></span>


          </button>



          <button type="button" class="btn btn-default btn-md" id="vote_down_9" name="vote_down_9" onclick="vote(9, 'down', 1, 6);">


            <span class="glyphicon glyphicon-arrow-down"></span>


          </button>



        </td>


        <td>Hello</td>


        <td>2014</td>


      </tr>


    </table>




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs