Question

I have multiple unordered lists with li’s in the form of a radio selection display format. When I choose a subsequent li within an ul, I should be able to store the previously selected li and be able to access the text in the h3 above the ul until the next li is selected and it should go on in a similar fashion. Which selector of jQuery should I use? Any ideas on how to achieve this?

Usecase 1

<h3>text1</h3>
<ul id="one">
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
<h3>text2</h3>
<ul id="two">
<li>some text</li>
<li>some text</li> --> I select this li first.
<li>some text</li>
</ul>
<h3>text3</h3>
<ul id="third">
<li>some text</li>
<li>some text</li>
<li>some text</li> -> Next I select this li - at this point I should be able to get the text "text2" of the previously selected li and store it in a variable say var 1.
</ul>

Usecase 2

<h3>text1</h3>
<ul id="one">
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
<h3>text2</h3>
<ul id="two">
<li>some text</li>
<li>some text</li> --> I select this li first.
<li>some text</li> --> Next I select this li - at this point I should be able to get the text "text2" of the previously selected li and store it in the same variable as above ie var 1.
</ul>
<h3>text3</h3>
<ul id="third">
<li>some text</li>
<li>some text</li>
<li>some text</li> 
</ul>

Answer 1

you can use the data object from jQuery

var dataHolder = $('ul').first();

dataHolder.data('oldEle', {
    text: 'NAN',
    index: -1,
    parentClass: "NANClass"
});

$('li').click(function() {

    alert('prev: ' + dataHolder.data('oldEle').text + ' index of prev: ' + dataHolder.data('oldEle').index + ' in parent: ' + dataHolder.data('oldEle').parentClass);
    dataHolder.data('oldEle').text = $(this).text();
    dataHolder.data('oldEle').index = $(this).index();
    dataHolder.data('oldEle').parentClass = $(this).closest('ul').attr('id');
});

data jquery example