JQueryMobile - Change thumbnail image src within code

Question

I'm using jquerymobile 1.4.0 and have a listview menu that contains thumbnail images (divl1star, divl2star etc...)

I would like to change the thumbnail source based on a series of criteria.

My issue is that I cannot see how to change the thumbnail. I am trying to change modify the 'src' attr as seen in the script at the end of the code but this fails to work. No error is seen in the console. I feel this resolution is quite simple and am thinking that the way I'm trying to access the img src is incorrect.

Any help is greatly appreciated.

<div data-role="page" id="mainmenu" data-theme="a">

    <ul data-role="listview" data-inset="true" id="divIdlevelList">
        <li data-icon="false" id="listL1"><a href="#menulevelone"><img id="divl1star" src="../img/icons/star0.png" class="ui-li-thumb"><h3>l1</h3><p>l1text</p></a></li>
        <li data-icon="false" id="listL2"><a href="#menuleveltwo"><img src="../img/icons/star0.png" id="divl2star" class="ui-li-thumb">l2<p>l2text</p></a></li>
        <li data-icon="false" id="listL3"><a href="level3.html"><img src="../img/icons/star0.png" id="divl3star" class="ui-li-thumb">l3<p>l3text</p></a></li>
        <li data-icon="false" id="listL4"><a href="level4.html"><img src="../img/icons/star0.png" id="divl4star" class="ui-li-thumb">l4<p>l4text</p></a></li>
        <li data-icon="false" id="listL5"><a href="level5.html"><img src="../img/icons/star0.png" id="divl5star" class="ui-li-thumb">l5<p>l5text</p></a></li>       
    </ul>


    <script>
        $("#divl1star").attr('src', '../img/icons/star2.png');
    </script>
</div>

Answer 1

Silly mistake was in my code, pointed out by Omar. I used #div1star rather than #divl1star.