Question

Please find the below structure.

When i click a button i need to get the li value of two div.

For example, Let us consider in first div i have selected test2 and in second div i have selected test 8 and when i click the button i need to get the value as 558 and 561

How can i do this using jquery.

<div class='parent'>test 1</div>
<div class="list">
    <ul>
    <li value="0">All</li>
    <li value="556">test 1</li>
    <li value="558">test 2</li>
    <li value="560">test 3</li>
    <li value="561">test 4</li>
    </ul>  
</div>

<div class='parent2'>test 6</div>
<div class="list2">
<ul>
<li value="0">All</li>
<li value="556">test 5</li>
<li value="558">test 6</li>
<li value="560">test 7</li>
<li value="561">test 8</li>
</ul>  
</div>

Thanks in advance…

Answer 1

li tags cannot be selected and do not have a value attribute defined. It would be more correct to use radio buttons or a dropdown to select a value. If you want to use li you could keep 2 global variables with the corresponding selected values which will be updated everytime some li is clicked:

var value1 = '0',
    value2 = '0';

$('.list li').click(function() {
    value1 = $(this).attr('value');
});

$('.list2 li').click(function() {
    value2 = $(this).attr('value');
});

$('#someButton').click(function() {
    alert('value1 = ' + value1 + ' | value2 = ' + value2);    
});