Question

I have a GridView control embeeded inside a div as under

<div id="parentDiv">
        Hello how r u
        <p>
            <asp:GridView ID="grdView" runat="server">
            </asp:GridView>
        </p>
    </div>

What I am trying to achieve is that, to find the Parent element of the grid (which is the “parentDiv”) and set the background color to green.My code(does not work)

$(document).ready(function() {
    var parentElement = $('#grdView').parent("div");
    parentElement.css("background-color", "#ffaaaa");
});​

Answer 1

Relatively to the GridView, you’d better use closest() method:

var parentElement = $("#grdView").closest("#parentDiv");  // or $("#parentDiv")

It will get the corresponding div better than parent(), since the parent node of the GridView is p element.

---

UPDATE. In order to set background to the text only, you have to place it in personal span or div tag:

<div id="parentDiv">
    <span>Hello how r u</span>
    <p>
        <asp:GridView ID="grdView" runat="server">
        </asp:GridView>
    </p>
</div>

And then use the following JavaScript code:

var parentElement = $("#grdView").closest("#parentDiv").children("span");
         // or just $("#parentDiv").children("span");