HTML多個ul> li使用jquery來回移動

Question

我試圖使用“下一個/上一個”按鈕遍歷多個列表。 我的方法適用於單個列表。 我無法在最初選擇的列表下方或上方找到列表的ID。 我必須使用哪種jquery方法？ 我在示例代碼下發布，希望它會有意義。

我嘗試.parent（）。next（）沒有成功。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>List</title>
  <style>
  .selected_bkg {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<button id="prv">Prev</button><button id="next">Next</button>
<div id="liid" hidden>1a</div>
<div id="uls">
    <div class="">Category Fruits</div>
    <ul>
      <li class="lis selected_bkg" id="1a">Orange</li>
      <li class="lis" id="2a">Apple</li>
      <li class="lis" id="3a">Pear</li>
    </ul>
    <div class="">Category Vegitables</div>
    <ul>
      <li class="lis" id="1b">Carrot</li>
      <li class="lis" id="2b">Cabbage</li>
      <li class="lis" id="3b">Brocoli</li>
    </ul>
    <div class="">Category Meat</div>
    <ul>
      <li class="lis" id="1c">Beef</li>
      <li class="lis" id="2c">Chicken</li>
      <li class="lis" id="3c">Mutton</li>
    </ul>
</div> 
<script>
$('#next').click(function() {
    lid=$('#liid').text()
    $('#'+lid).toggleClass('selected_bkg')
    nxtid=$('#'+lid).next('.lis').attr('id')
    if(typeof nxtid == 'undefined') {
        nxtid=$('#'+lid).parent().next('.lis').attr('id')
    }
    $('#'+nxtid).toggleClass('selected_bkg')
    console.log(lid, nxtid, '-',$('#'+nxtid).text(),'-')
    $('#liid').text(nxtid)
});
$('#prv').click(function() {
    lid=$('#liid').text()
    $('#'+lid).toggleClass('selected_bkg')
    nxtid=$('#'+lid).prev('.lis').attr('id')
    if(typeof nxtid == 'undefined') {
        nxtid=$('#'+lid).parent().prev('.lis').attr('id')
    }
    $('#'+nxtid).toggleClass('selected_bkg')
    console.log(lid, nxtid, '-',$('#'+nxtid).text(),'-')
    $('#liid').text(nxtid)
});
</script>

</body>
</html>

Answer 1

這是一個完成技巧的代碼片段-遍歷列表項，而不關注“它們在哪里”。

 $('#next').on('click', function() { nextPrev(1) }) $('#prv').on('click', function() { nextPrev(-1) }) // this function handles the prv and next button clicks // by using the dir (direction) parameter, that can be // 1 (one) or -1 (negative one) function nextPrev(dir) { let index = 0 // iterating over the items, so we can find the index of // the selected item in the list of the selector items $('.lis').each(function(i, el) { if ($(el).hasClass('selected_bkg')) { index = i } }) // handling class changes (removing class and adding class // to previous or next item) if ((index + (1 * dir) >= 0) && (index + (1 * dir) < $('.lis').length)) { $($('.lis')[index]).removeClass('selected_bkg') $($('.lis')[index + (1 * dir)]).addClass('selected_bkg') } }

 .selected_bkg { color: blue; text-decoration: underline; cursor: pointer; }

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <button id="prv">Prev</button><button id="next">Next</button> <div id="liid" hidden>1a</div> <div id="uls"> <div class="">Category Fruits</div> <ul> <li class="lis selected_bkg" id="1a">Orange</li> <li class="lis" id="2a">Apple</li> <li class="lis" id="3a">Pear</li> </ul> <div class="">Category Vegitables</div> <ul> <li class="lis" id="1b">Carrot</li> <li class="lis" id="2b">Cabbage</li> <li class="lis" id="3b">Brocoli</li> </ul> <div class="">Category Meat</div> <ul> <li class="lis" id="1c">Beef</li> <li class="lis" id="2c">Chicken</li> <li class="lis" id="3c">Mutton</li> </ul> </div>

基本思想是jQuery通過選擇器創建對象列表。 因此， $('.lis')不僅是一個ELEMENT ，而且是與該選擇器匹配的所有元素-為了便於使用，它指的是在您像這樣編寫時找到的第一個元素。

由於jQuery對象實際上是一個列表 ，因此您可以使用$ .each（）對其進行迭代，然后逐個元素地進行填充。 因此，您不必知道所選元素在DOM中的確切位置，只需知道它們是由選擇器選擇的即可。

我的代碼片段唯一缺少的是，您可以在第一個元素之前添加prv ，而在最后一個元素之后添加下一個-因此您需要在其中添加“后衛”。

編輯

我完成了“衛士” -你不能第1項之前PRV或下一過去的最后一個項目。

HTML多個ul> li使用jquery來回移動

問題描述

1 個解決方案

解決方案1
1 已采納 2019-08-20 18:23:59

編輯

HTML多個ul&gt; li使用jquery來回移動

問題描述

1 個解決方案

解決方案1 1 已采納 2019-08-20 18:23:59

編輯

HTML多個ul> li使用jquery來回移動

解決方案1
1 已采納 2019-08-20 18:23:59