Access div using JQuery

Anobody suggest me how to access DIV in td

<table border="0" cellpadding="0" cellspacing="0" width="95%">
    <tr>
        <td valign="top" style="width:25%">
            <img src="../NewsImages/82010437713162453512.bmp" id="rptAllNewsContent__ctl1_imgNews" width="120" height="120" />
        </td>
        <td valign="top" align="left" style="width:*;padding-left:7px;">
            dsdsdsd
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td align="left" style="width:20%;"><a id="rptAllNewsContent__ctl1_lnkbtnTotalComments" href="javascript:__doPostBack('rptAllNewsContent$_ctl1$lnkbtnTotalComments','')" style="color:#80C355;">2 Comments</a></td>
                    <td align="left"><a id="rptAllNewsContent__ctl1_lnkbtnAddComments" href="javascript:__doPostBack('rptAllNewsContent$_ctl1$lnkbtnAddComments','')" style="color:#80C355;">Add Comments</a></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr><td colspan="2" style="height:13px;"></td></tr>
    <tr>
        <td>
            <div id="rptAllNewsContent__ctl1_divComment">
            sdfasdasda
            sdsa
            d
            asdas
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top" style="width:25%">
            <img src="../NewsImages/8201010976151655912.jpg" id="rptAllNewsContent__ctl2_imgNews" width="120" height="120" />
        </td>
        <td valign="top" align="left" style="width:*;padding-left:7px;">
            dasdasd
        </td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="left" style="width:20%;"><a id="rptAllNewsContent__ctl2_lnkbtnTotalComments" href="javascript:__doPostBack('rptAllNewsContent$_ctl2$lnkbtnTotalComments','')" style="color:#80C355;">3 Comments</a></td>
                        <td align="left"><a id="rptAllNewsContent__ctl2_lnkbtnAddComments" href="javascript:__doPostBack('rptAllNewsContent$_ctl2$lnkbtnAddComments','')" style="color:#80C355;">Add Comments</a></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr><td colspan="2" style="height:13px;"></td></tr>
        <tr>
            <td>
                <div id="rptAllNewsContent__ctl2_divComment">
                sdfasdasda
                sdsa
                d
                asdas
                </div>
            </td>
        </tr>
    </table>

I tried in this way but doesn't work.

$(document).ready(function(){
    $("a[id$='lnkbtnTotalComments']").click(function(){
        $(this).parent("td").parent("tr").next("tr").next("tr td").find("div").text();
    开发者_StackOverflow    return false;
    });
    });

(completely different from my first solution)

Try this: - get the id of the link clicked on - replace "lnkbtnTotalComments" with "divComment" so we get the id of the matching div

$("a[id$='lnkbtnTotalComments']").click(function() {
    var id = $(this).attr("id").replace("lnkbtnTotalComments", "divComment");
    $("#" + id).html("gotcha");
    return false;
});

Works for me. You can do anything you want instead of changing the html contents of course.

$(document).ready(function(){
    $("a[id$='lnkbtnTotalComments']").click(function(){
        $("#rptAllNewsContent__ctl1_divComment").text();
        return false;
    });
    });

try: $('#rptAllNewsContent__ctl1_divComment').text();

What about:

$(document).ready(function() {
    var totalCommentsSel = "a[id$='lnkbtnTotalComments']",
        commentsContSel = "div[id$='divComment']",
        wrapper = "table";

    $(totalComments).click(function(e){
        var commentsDiv = $(this).closest(wrapper).find(commentsContSel);
        // Use commentsDiv below

        // Prevent the click from redirecting, but allow further propagation
        e.preventDefault();
    });
});

EDIT: This one does work (tested), but it's not pretty code. Any way you could change into a nicer markup?

$(document).ready(function() {
    var totalCommentsSel = "a[id$='lnkbtnTotalComments']",
        commentsContSel = "div[id$='divComment']";

        $(totalCommentsSel).click(function(e){
            var $wrapper = $(this).closest('table').closest('tr').next().next(),
                commentsDiv = $wrapper.find(commentsContSel);
                // Use commentsDiv below

                console.info($wrapper.length, commentsDiv.length, commentsDiv.length);
                // Prevent the click from redirecting, but allow further propagation
                return false;
            });
        });