jquery在单击li时隐藏或显示ul的动态li


jquery hide or show dynamic li of ul when click on li

在php while循环中,我得到了这种类型的数据,当我点击li which id="test1"时,隐藏该li which id="test1"并显示li which id="new_test1"我想为特定的ul做处理意味着我点击"li",然后为该li所在的特定ul做处理。

<ul id="cpvote">
<li id="test1">Message 1</span></li>
<li id="test2">Message 2</li>
<li id="test3">Message 3</li>
<li id="new_test1" style="display:none">Message 4</li>
<li id="new_test2" style="display:none">Message 5</li>
</ul>
<ul id="cpvote">
<li id="test1">Message 1</span></li>
<li id="test2">Message 2</li>
<li id="test3">Message 3</li>
<li id="new_test1" style="display:none">Message 4</li>
<li id="new_test2" style="display:none">Message 5</li>
</ul>
<ul id="cpvote">
<li id="test1">Message 1</span></li>
<li id="test2">Message 2</li>
<li id="test3">Message 3</li>
<li id="new_test1" style="display:none">Message 4</li>
<li id="new_test2" style="display:none">Message 5</li>
</ul>

ID必须是唯一的但是您可以多次使用一个类。

使用类选择器。以下只是使用类选择器实现所需结果的示例

HTML:

<ul class="cpvote">
    <li class="test1">Message 1</li>
    <li class="new_test1" style="display:none">Message 4</li>
</ul>
<ul class="cpvote">
    <li class="test1">Message 1</li>
    <li class="new_test1" style="display:none">Message 4</li>
</ul>
<ul class="cpvote">
    <li class="test1">Message 1</li>
    <li class="new_test1" style="display:none">Message 4</li>
</ul>

脚本

$(document).ready(function () {
    $(document).on('click', '.cpvote .test1', function () {
        $(this).closest('.cpvote').find('.new_test1').toggle();
    });
});

DEMO

试着这样做。

通过使用Jquery使UL唯一识别

$( document ).ready(function() {
    // putting extra unique attributes in UL to Identified.
    $("UL").each(function(i){
        $("UL").eq(i).attr('ul-id','ul-'+i);    
    });
    $("UL").each(function(i){
        $("UL[ul-id='ul-"+i+"']").find("LI").on("click",function(){
           $("UL[ul-id='ul-"+i+"']").find("#new_"+$(this).attr('id')).show();
        });
    });
});

演示:http://jsfiddle.net