CODEWITHSUNDEEP
jquery
neelmeg
neelmeg

Reputation: 2509

How to store previously selected li option using jQuery?

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>

Upvotes: 0

Views: 413

Answers (5)

James Jithin
James Jithin

Reputation: 10565

Is this what you need?

http://jsfiddle.net/RZRcC/7/

html:

<h3>text1</h3>
<ul id="one">
    <li><input type="radio" value="test1" name="t1"/></li>
    <li><input type="radio" value="test1" name="t1"/></li>
    <li>v</li>
</ul>
<h3>text2</h3>
<ul id="two">
    <li><input type="radio" value="test1"  name="t2"/></li>
    <li><input type="radio" value="test1"  name="t2"/></li> --> I select this li first.
    <li><input type="radio" value="test1"/></li>
</ul>
<h3>text3</h3>
<ul id="third">
    <li><input type="radio" value="test1"  name="t3"/></li>
    <li><input type="radio" value="test1"  name="t3"/></li>
    <li><input type="radio" value="test1"  name="t3"/></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>

The jQuery part:

var lastSelect = null;
var lastSelectHead = null;
$(document).ready(

function() {
    $("li > input[type='radio']").click(

    function() {
        if (lastSelect) {
            lastSelectHead = $(lastSelect).parents("ul").prev("h3").text();
        }
        lastSelect = this;
        if (lastSelectHead) {
            alert(lastSelectHead);
        }
    });
});

Upvotes: 0

zdrsh
zdrsh

Reputation: 1667

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

Upvotes: 1

Richard Edwards
Richard Edwards

Reputation: 2060

var lastLiH3;
$('li').click(function(){
    if(lastLiH3){
        alert(lastLiH3);
    }
    lastLiH3 = $(this).parent('ul').prev('h3').text();
});

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35793

Just store the last clicked item at the end of the click event. You can then work your way back up the dom to get the value of the relevant h3.

var lastClickedLi = null;
var var1 = "";
$('li').click(function() {
    if (lastClickedLi != null) {
        var1 = lastClickedLi.closest('ul').prev('h3').text();
    }
    lastClickedLi = $(this);
});

http://jsfiddle.net/6yypn/

Upvotes: 1

jbabey
jbabey

Reputation: 46647

var lastClickedText;

$('li').live('click', function () {
    if (lastClickedText) {
        alert(lastClickedText);
    }
    lastClickedText = $(this).parents('h3').text();
});

this should alert whatever the inner text of the parent H3 of the last clicked LI was. Untested.

Upvotes: 0

Related Questions