Question

I’ve made a row striped table using divs instead of tables (I hate tables). I want to make it so that if I click on one of the divs I can grab one of its childs values.

  <div class='row'><!-- I want to click this div -->

         <p>I want this value</p>

         <p>some other val</p>            

  </div>

  <div class='row'>

         <p>I don't want this one</p>

         <p>some other val</p>            

  </div>

Let me know if you have a answer.

Answer 1

$('.row').click(function(){
   var value = $(this).find('p').eq(0).text();
});

Of course, you’ll probably want to mark your inner values a little better to fix the inner find() selector. Example:

<div class="row">
   <span class="row-value">35</span>
   <p>Some descriptive text</p>
</div>
<div class="row">
   <h1>Cool header</h1>
   <span class="row-value">5</span>
</div>

Then you could use $(this).find('.row-value').text() and feel better about the selector not breaking.