Getting the container from the given structure using selector

consider the following html structure:

<div>
     <div class="top">
        <div id="id1">123</div>
     <div>

     <div class="top">
        <div id="id2">123</div>
     <div>
</div>

Now I want to pick the container on the basis of class="top" and id="id2" in such a way that i get the container with class top. How can I do that? I would like to have some selector for that.

P.S: the id i am looki开发者_开发知识库ng for is not necessarily to be an immediate parent of the class top.

Is this what you're looking for?

$('#id2').closest('.top')

It will start with the ID and travel up until it finds the class top.

Use .closest(...)

$('#id2').closest('.top');

Or if your structure is always as you have it in the question, then maybe a simple,

$('#id2').parent();

will do.

If by "container" you mean the markup, not the DOM element add this somewhere in javascript:

jQuery.fn.outerHTML = function(s) {
    return (s)
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
}

Then use it like this:

$('.top').outerHTML();