jquery hide или show dynamic li of ul при нажатии на li

Question

В цикле php while я получил этот тип данных, и когда я нажимаю на li, который id = "test1", тогда скройте тот li, который id = "test1", и покажите li который id = "new_test1" Я хочу, чтобы для определенного ul означает, что я нажимаю «li», а затем обрабатываю эту конкретную ul, в которой присутствует этот li.

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

Answer 1

Идентификаторы должны быть уникальными. Однако вы можете использовать класс несколько раз.

Использование class selector. Ниже приводится только пример для достижения желаемого результата с помощью селектора класса

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> 

Script:

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

DEMO

Answer 2

Попробуйте сделать так.

с помощью 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(); 
     }); 
    }); 
}); 

DEMO: http://jsfiddle.net