如何使用jQuery存儲以前選擇的li選項？

Question

我有無線列表顯示格式的李無線列表多個無序列表。當我在ul中選擇後續的li時，我應該能夠存儲先前選擇的li並能夠訪問ul上方h3中的文本，直到選擇了下一個li，並且它應該以類似的方式繼續。我應該使用哪個jQuery選擇器？任何想法如何實現這一目標？

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

可以使用數據對象從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

Answer 2

var lastClickedText; 

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

這應該提醒無論最後的父H3的內部文本點擊李爲。未經測試。

Answer 3

只需將最後點擊的項目存儲在點擊事件的末尾。然後你可以通過自己的方式來獲得相關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/

Answer 4

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

Answer 5

這是你需要什麼？

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> 

jQuery的部分：

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); 
     } 
    }); 
});