Workaround with deep hierarchies. jQuery (find, each, closest)

Question

i have code

<table id="financial101_tab1" class="dxrpControl_Moderno dxrpWithoutHeader_Moderno" style="border-collapse: separate; opacity: 1; margin-left: 0px;">

<tbody>
    <tr>
        <td id="financial101_tab1_RPC" class="dxrp dxrpcontent" style="padding: 6px 10px 10px; border-width: medium; border-style: …r-color: -moz-use-text-color; background-color: transparent;">
            <input id="BlockControlfinancial101_tab1ATI" type="hidden" value="1" name="BlockControlfinancial101_tab1ATI"></input>
            <div id="BlockControlfinancial101_tab1" class="dxtcLite_Moderno dxtc-top" style="">
                <ul id="BlockControlfinancial101_tab1_TC" class="dxtc-strip dxtc-stripContainer" style="padding: 3px 0px 0px; width: 624px;"></ul>
                <div id="BlockControlfinancial101_tab1_CC" class="dxtc-content" style="visibility: visible; width: 600px;"></div>
                <input type="hidden" name="BlockControlfinancial101_tab1_DXState" value="{"t":[]}"></input>
            </div>
            <b class="dx-clear"></b>
            <script id="dxss_1482507144" type="text/javascript"></script>
        </td>
    </tr>
</tbody>

there are 6 tables,

i want to get all elements by class names .dxrpControl_Moderno.dxrpWithoutHeader_Moderno, because they are the same in 6 t tables, and im tying to set it's childs #BlockControlfinancial101_tab2_AT0background, already have

$(".dxrpControl_Moderno.dxrpWithoutHeader_Moderno").each(function () {
            if ($(".dxrpControl_Moderno.dxrpWithoutHeader_Moderno").find(".dxtc-text.dx-vam").text() == "Гистограмма") {
                $(".dxrpControl_Moderno.dxrpWithoutHeader_Moderno").find("#BlockControlfinancial101_tab2_AT0").css('background', 'url(../../CustomStyleSource/icons/chart_bar_icon24.png) no-repeat center center');
            }
        });

sadly it doesn't work, any ideas?

Answer 1

You need to use $(this) to target current .dxrpControl_Moderno.dxrpWithoutHeader_Moderno inside each loop:

$(".dxrpControl_Moderno.dxrpWithoutHeader_Moderno").each(function () {
    if ($(this).find(".dxtc-text.dx-vam").text().trim() == "Гистограмма") {
        $(this).find(".BlockControlfinancial101_tab2_AT0").css('background', 'url(../../CustomStyleSource/icons/chart_bar_icon24.png) no-repeat center center');
    }
});

Also, id is unique, you should use class instead, so you need to change:

id="BlockControlfinancial101_tab2_AT0"

to:

class="BlockControlfinancial101_tab2_AT0"

for your elements.