Question

I have a div structure over which generation I have little control, generated by a jQuery function. The structure has 19 first generation children, one second generation child and 3 third generation children. I am not interested in the fourth generation children. Here is the code:

<div id="columntableordersGrid">
<div></div>
<div></div>
....
<div></div>
<div id="30bcef39-6ab1-69f5-81af-bbb9e870bfd4">
    <div>
        <div id="pdfs"><img src="/kabinet/images/32x32/pdf.png"></div>
        <div class="container">
            <div class="filtericon">
                <div class="filterbutton"></div>
            </div>
            <div class="sortasc">
                <div class="sortascbutton"></div>
            </div>
            <div class="sortdesc" >
                <div class="sortdescbutton"></div>
            </div>
        </div>
        <div id="bb29c057-acd8-f1eb-aa13-69d8498ae47e">
            <div class="column-menubutton"></div>
        </div>
    </div>
</div>
</div>

I need to get the id of one of the third generation children of this structure (bb29c057-acd8-f1eb-aa13-69d8498ae47e). Each time the script runs it is generating new ids.

I can get the ids of the first generation children by using:

    var all = $("#columntableordersGrid > div").map(function() {
        return this.id;
    }).get();

I am interested in child 17, therefore all[16] gives me the id of that child, which is:

30bcef39-6ab1-69f5-81af-bbb9e870bfd4 in the code example above.

The second generation div has unfortunately no class or id, as I said, I have no control over its generation. The third child of this div is the one whose id I need.

Help would be highly appreciated.

Answer 1

If the id you need is always the parent of an element with the class “.column-menubutton” than the below should work using your existing code.

var parentDivId = all[16];
var menuParentDivId = $('#' + parentDivId + " .column-menubutton").parent().attr('id');

See DEMO