As users select choices from a side menu, a set of items is dynamically added. The more choices they make, the more items are displayed.
Some items have a 'stats' div while others do not. I want to check if an item has a 'stats' div, and if it does not, increase the width of the 'more' div so that it fills up the empty space left by the missing 'stats' block.
Below is the HTML code for the generated items:
<div class="item" idse="2116082">
<div class="ico"></div>
<div class="ID">2237</div>
<div class="Time"><span>00:00</span><span>06 Dec</span></div>
<div class="Event"><span>Test</span><span>Test</span></div>
<div class="stats">Stats</div>
<div class="more">+ 3</div>
<div class="odds">
<div class="odd r1 c1 g1" id="td_448023666">
<div title="Home">Home</div>
<div>1/2</div>
<div class="hnd"></div>
</div>
<div class="odd r1 c2 g1" id="td_448023667">
<div title="Draw">Draw</div>
<div>7/2</div>
<div class="hnd"></div>
</div>
<div class="odd r1 c3 g1" id="td_448023668">
<div title="Away">Away</div>
<div>9/2</div>
<div class="hnd"></div>
</div>
<div class="sepOdds"></div>
<div class="endOdds"></div>
</div>
</div>Here is my jQuery function:
$('body').on('load', '.item', function () {
if (!$(this).children('.stats')) {
$(this).children('.more').css('width', '132px');
}
});