如果有,请获取上一个和下一个列表项ID

时间:2017-07-19 07:49:15

标签: javascript jquery

我坚持一点,需要你的帮助朋友。我需要上一个和下一个列表。例如,我在ul中有三个li,第二个是活动的。现在我必须得到上一个和下一个li id。如果第一个李是活跃的,那么如果最后一个人没有做任何事情,也不要做任何事情。

<ul>
    <li id="1">First <span class="testId">14</span></li>
    <li id="2" class="active">Second <span class="testId">15</span></li>
    <li id="3">Third <span class="testId">16</span></li>
</ul>

Jquery代码我尝试但不明白该怎么做

if(){
            alert('good');
            /*var PrevTestId = $(this).prev('li').find('.testId').text();
            var thisId = $(this).next().find('.testId').text();
            alert(PrevTestId +" , "+ thisId);*/
        }
        if($(this).index() > 0){
            var PrevTestId = $(this).prev('li').find('.testId').text();
            var thisId = $(this).next().find('.testId').text();
            alert(PrevTestId +" , "+ thisId);   
        }

2 个答案:

答案 0 :(得分:1)

您可以使用解决方案https://jsfiddle.net/1aL33df4/

&#13;
&#13;
$('li').hover(function(){
  	if( typeof $(this).prev().attr('id') != 'undefined')
  		console.log("Previous Element ID: " + $(this).prev().attr('id'));
    if( typeof $(this).next().attr('id') != 'undefined')
    	console.log("Next Element ID: " + $(this).next().attr('id'));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="1">First <span class="testId">14</span></li>
    <li id="2" class="active">Second <span class="testId">15</span></li>
    <li id="3">Third <span class="testId">16</span></li>
</ul>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

  1. 使用.next()或.prev()来获取相应的li
  2. 使用.attr()获取id
  3. 使用hasClass()来测试li是否具有活动类
  4. &#13;
    &#13;
    var pliid = $("ul li.active").prev('li').attr('id');
    var nliid = $("ul li.active").next('li').attr('id');
    
    console.log("prev li id is " + pliid)
    console.log("prev li is active " +  $("ul li.active").prev('li').hasClass('active'))
    console.log("prev li textid text " +  $("ul li.active").prev('li').find('.testId').text())
    console.log("next li id is " + nliid)
    console.log("next li is active " +  $("ul li.active").next('li').hasClass('active'))
    console.log("next li textid text " +  $("ul li.active").next('li').find('.testId').text())
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
        <li id="1">First <span class="testId">14</span></li>
        <li id="2" class="active">Second <span class="testId">15</span></li>
        <li id="3">Third <span class="testId">16</span></li>
    </ul>
    &#13;
    &#13;
    &#13;