简体   繁体   中英

I have DIV and its child DIV , i want to select last DIV using jQuery . Parent DIVS have id

Here is the description of problem . I have parent div(allcomments_4) and than inside it , i have few child divs(oneEntry) with their own children inside but i just need to find the last child of the parent node(allComments_4). I want to read the content inside of div(lastComment) it than add it above this div which will be similar like above div (oneEntry) using jquery. I want to do this manipulation using ids not class. As i calculate the id of allComments_4 div . I tried like this.

<script>
    var allcommentsId =allcomments_4
    var right = "div#lastComment"
    var left = '#'+allcommentsId 
    var message = $(left>right ).html()
    alert(message)
</script>

<div id="allcomments_4">
 <div class="oneEntry">
   <div class="commentImage">
   </div>
   <div class="commentEntry">
   <div class="commentText">
   </div>
   <div class="commentDate">
    Commented On -"Thu Jan 26 16:44:16 EST 2012"/>
   </div>
 </div>
 <div class="oneEntry">
   <div class="commentImage">
   </div>
   <div class="commentEntry">
   <div class="commentText">
   </div>
   <div class="commentDate">
    Commented On -"Thu Jan 26 16:44:16 EST 2012"/>
   </div>
 </div>
</div><!-- One Comment Entry Ends here -->
<div id ="lastComment">
</div><!-- last Comment ends here -->
</div><!-- All Comments Ends here -->

I think missing something and i am sorry for asking such lame question as i am beginner in jquery and this whole javascript thing.

As mentioned, IDs must be unique. That being said, here is a way to accomplish what you asked (using classes where appropriate):

function displayContent(IdNum) {
    var Id = '#allcomments_' + IdNum;
    var $lastComment = $(Id).find('.lastComment');
    var message = $lastComment.html();
    alert(message);
}

displayContent(4);

HTML w/ classes (for reference):

<div id="allcomments_4">
    <div class="oneEntry">
        <div class="commentImage">
        </div>
        <div class="commentEntry">
            <div class="commentText">
            </div>
            <div class="commentDate">
            Commented On - "Thu Jan 26 16:44:16 EST 2012"
            </div>
        </div>
    </div>
    <div class="oneEntry">
        <div class="commentImage">
        </div>
        <div class="commentEntry">
            <div class="commentText">
            </div>
            <div class="commentDate">
            Commented On - "Thu Jan 26 16:44:16 EST 2012"
            </div>
        </div>
    </div><!-- One Comment Entry Ends here -->
    <div class="lastComment">
        Body of lastComment
    </div><!-- last Comment ends here -->
</div><!-- All Comments Ends here -->

jsFiddle: http://jsfiddle.net/yT8Fc/

var message = $(left>right ).html()

This does not work as it gives the result of the bigger than comparison as parameter. It has to look like this:

var message = $(left + ' > ' + right).html()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM