通过ID动态选择嵌套元素

Question

I never fully understood JQuery selectors. How to go up/down or in/out nested elements which are dynamically created and are identified only by a unique id. For example now I have this:

<div class="item white" id="871" name="871">
    <span class="twitter"><a href="php/tweet.php">Tweet</a></span>        
    <div class="topleft">
         <ul class="ribbon pinky">
             <li class="date_header"></li>
             <li class="date_number"></li>
             <li class="date_footer"></li>                          
         </ul>
    </div>
    <div class="bottomleft">
         <ul class="links">
             <li><a href=""><img src="" alt=""/></a></li>
             <li><a href="mailto:"><img src="" alt=""/></a></li>
         </ul>
    </div>
    <div class="topright">
        <ul class="white_box_content">
             <li class="picture"><img class="image" src="" alt="" /></li>
             <li class="title"></li>
             <li class="subtitle"></li> 
             <li class="description"></li>
         </ul>
    </div>
    <div class="item_footer">
    <div class="line"></div>
         <ul class="footer_content">
               <li class="place"></li>
               <li class="contacts"></li>
         </ul>
    </div>
</div>

My web page is built by a number of these HTML 'blocks'. Now i would like to get the ID and the value of the 'title' class using JQuery as I want to pass them to a PHP file using Ajax.

 $(".twitter").click(function(event){ 
      event.preventDefault();
           var i = $(this).closest('.item').attr('id');
           var t = TITLE ??
           $.get("php/tweet.php", { id: i, title: t } );
           return false;
 });

I managed to get the ID only using:

$(this).closest('.item').attr('id');

Now, how to I get the .TITLE class? How do I use the ID to select the correct .TITLE? When I click the link I would like to pass the .title value to tweet.php.

Answer 1

Try find():

$(this).closest('.item').find('.title').html();

http://api.jquery.com/find/

http://api.jquery.com/class-selector/

That code gets the html contents of the element with class title inside an element with class item.

Answer 2

Once you get the ID, you can use it to get the .title div:

var t = $("#"+i+" .topright .title");

And if you want the title inside the div:

var t = $("#"+i+" .topright .title").text();