Question

我有多个无序列表，其中li是无线电选择显示格式。当我在ul中选择后续的li时，我应该能够存储先前选择的li并且能够访问ul上方的h3中的文本，直到选择下一个li并且它应该以类似的方式继续。我应该使用哪个jQuery选择器？关于如何实现这一点的任何想法？

用例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>

用例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

只需在Click事件结束时存储最后点击的项目。然后，您可以按照dom的方式工作，以获得相关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 2

您可以使用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 3

var lastClickedText;

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

这应该警告最后点击的LI的父H3的内部文本。未经测试。

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

如何使用jQuery存储以前选择的li选项？

5 个答案: