Question

I have this div tags :

<div id="target-share">
<a href="#" title="" id="to-chosen" class="default"><span class="to-admin">Admin</span></a>
<ul id="select-shareto">
<li data-val="0-1">
<a href="#" title="" class="selected"><span class="to-Finance">Finance</span></a>
</li>
<li data-val="1-1">
<a href="#" title=""><span class="to-admin-private">Admin Private</span></a>
</li>
<li data-val="1-0">
<a href="#" title=""><span class="to-ceo">CEO</span></a>
</li>
<li data-val="0-0">
<a href="#" title=""><span class="to-ceo-private">CEO Private</span></a>
</li>                                    
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->

and this JavaScript :

<script type="text/javascript">
$(document).ready(function($) {
        $('ul li').click(function() {
            $('input#shareto').val($(this).data('val'));
        });
    });
</script>

that JavaScript actually works when I’m using it with that div alone. but when I put it on my full code, that JavaScript doesn’t work. I think that because there are more than one UL and LI tags on my code.

Now, the question is… how to apply that Javascript so that it can works ONLY for that div, even though there are other UL and LI tags.

Answer 1

Just use this instead targeting the div first then its contents

$('#target-share ul li')