代码之家  ›  专栏  ›  技术社区  ›  Gregory Schultz

如何查找列表中的最后一个li并隐藏元素

jquery javascript
  •  0
  • Gregory Schultz  · 技术社区  · 5 年前

    在列表的最后一项时,我很难试图取消隐藏元素基本上我有一个列表,通过查找类来隐藏和取消隐藏按钮 <li class="single-data-item has-multi-items"> .

    我的问题是当它在寻找最后一个 li 在里面 <li class=“single data item has multi items”> 

    <li class="single-data-item has-multi-items"><ul class="pagnation-2">
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul></li>

    JS代码: 

    if($item.is(':last-child')) {
    $('#multi-next-multi-item').css('display','none');
    $('#multi-single-next').css('display','block');
}

    问题是试图找到最后一个li和隐藏/取消隐藏按钮它将另一项添加到列表中,然后隐藏/取消隐藏按钮。你可以在3C和另一个项目符号添加后看到它,然后恢复正常。 

    $('#multi-single-next').click(function() {
    let $item;

    if(!$('ul.pagnation li.single-data-item.active').length) {
        $item = $('ul.pagnation li.single-data-item').first();
    }
    else {
        $prev = $('ul.pagnation li.single-data-item.active');
        $item = $prev.next();

        if(!$prev.next().length) {
            $prev.removeClass('active');
            $prev.hide();
            return;
        }

        $prev.removeClass('active');
        $prev.hide();
    }

    $item.addClass('active');
    $item.show();

    // sub items
    $('ul.pagnation-2 li').removeClass('active');
    if($item.hasClass('has-multi-items')) {
        const $sub = $item.find('ul li').first();
        $sub.addClass('active');
        $sub.show();
        $('#multi-next-multi-item').css('display','block');
        $('#multi-single-next').css('display','none');
    }
});


$('#multi-next-multi-item').click(function() {
    const $item = $('ul.pagnation-2 li.active');
    const $next = $item.next();

    $item.removeClass('active');
    $item.hide();

    $next.addClass('active');
    $next.show();
    if($item.is(':last-child')) {
    	$('#multi-next-multi-item').css('display','none');
      $('#multi-single-next').css('display','block');
		}
    
});
    .single-data-item { display: none; }
ul.pagnation-2 li { display: none; }
#multi-next-multi-item {display:none}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<ul class="pagnation">
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items"><ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
    </ul></li>
<li class="single-data-item"><div class="data-item">4</div></li>
<li class="single-data-item"><div class="data-item">5</div></li>
</ul>
    3 回复  |  直到 5 年前
        1
  •  1
  •   charlietfl    5 年前

    下面是一些简单的逻辑,它基于 <li> 不是有课的 multi-items 是的。

    下一项由该集合中活动项的索引确定。

    两个按钮都可以使用一个单击处理程序 

    const $li = $('.pagnation li').not('.has-multi-items'),
  $multi = $('.has-multi-items');


const $buttons = $('#multi-single-next, #multi-next-multi-item').click(function() {
  let $item;
  //easiest to always hide multi then use `add()` below to show the parent as needed
  $multi.hide();
  
  if (!$li.filter('.active').length) {
    $item = $li.first();
  } else {
    const $prev = $li.filter('.active').removeClass('active').hide(),
      nextIdx = $li.index($prev) + 1;
    $item = nextIdx < $li.length ? $li.eq(nextIdx) : $li.first();
  }

  const $multiParent = $item.closest('.has-multi-items')
  // toggle the buttons based on parent being multi or not
  const isMulti = $multiParent.length > 0;
  $buttons.first().toggle(!isMulti)
  $buttons.last().toggle(isMulti)
  // use add() to include the parent multi (if it exists) to show both
  $item.addClass('active').add($multiParent).show();
});
    .single-data-item {
  display: none;
}

ul.pagnation-2 li {
  display: none;
}

#multi-next-multi-item {
  display: none
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<ul class="pagnation">
  <li class="single-data-item">
    <div class="data-item">1</div>
  </li>
  <li class="single-data-item">
    <div class="data-item">2</div>
  </li>
  <li class="single-data-item has-multi-items">
    <ul class="pagnation-2">
      <li>3a</li>
      <li>3b</li>
      <li>3c</li>
    </ul>
  </li>
  <li class="single-data-item">
    <div class="data-item">4</div>
  </li>
  <li class="single-data-item">
    <div class="data-item">5</div>
  </li>
</ul>
        2
  •  1
  •   Nidhin Joseph    5 年前

    有点不同的方法 arrays . 您可以迭代并将元素设置为数组,然后维护 index 当前可见元素的。这就留下了在 click 事件。 

    var items = [];
var currentIndex = 0;
var currentItem;
$(document).ready(function() {
  $('.single-data-item').each((i, e) => {
    if ($(e).hasClass('has-multi-items')) {
      [...$(e).find('li')].forEach(i => items.push($(i)))
    } else {
      items.push($($(e).find('div')));
    }
  })
});

$('#multi-single-next, #multi-next-multi-item').click(function() {
  if (currentItem) {
    hideItem(currentItem)
  }

  currentItem = items[currentIndex % items.length];
  showItem(currentItem);

  currentIndex++;
});

function showItem(item) {
  if (item.is('div')) {
    item.parent().show();
    $('#multi-single-next').show();
    $('#multi-next-multi-item').hide();
  } else {
    item.show();
    item.closest('.single-data-item').show();
    $('#multi-single-next').hide();
    $('#multi-next-multi-item').show();
  }
}

function hideItem(item) {
  if (item.is('div')) {
    item.parent().hide();
  } else {
    item.hide();
    item.closest('.single-data-item').hide();
  }
}
    .single-data-item {
  display: none;
}

ul.pagnation-2 li {
  display: none;
}

#multi-next-multi-item {
  display: none
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<ul class="pagnation">
  <li class="single-data-item">
    <div class="data-item">1</div>
  </li>
  <li class="single-data-item">
    <div class="data-item">2</div>
  </li>
  <li class="single-data-item has-multi-items">
    <ul class="pagnation-2">
      <li>3a</li>
      <li>3b</li>
      <li>3c</li>
    </ul>
  </li>
  <li class="single-data-item">
    <div class="data-item">4</div>
  </li>
  <li class="single-data-item">
    <div class="data-item">5</div>
  </li>
</ul>
        3
  •  -1
  •   Vunf1    5 年前 
    <ul class="pagnation">
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items"><ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
    **</ul></li>**
<li class="single-data-item"><div class="data-item">4</div></li>
<li class="single-data-item"><div class="data-item">5</div></li>
</ul>

    你在动态添加HTML吗如果没有,你有没有试着删除代码中的那一行?

    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    Jason Owens  ·  我的html/javascript播放按钮无法播放嵌入的youtube视频
    1 年前
    SlickRed  ·  我无法使用JS关注HTML元素
    1 年前
    Mayron Guedes  ·  如果登录名不在本地存储中,如何重定向页面?
    1 年前
    assembler  ·  Nextjs没有处理发布请求
    1 年前
    PavelB  ·  如何使用Seleniumwebdriver和mocha只运行一个测试文件?
    1 年前
    BADRUM  ·  执行两个获取功能后,如何导航回页面?
    1 年前
    Toniq  ·  javascript为php保存多维数组
    1 年前
    Natalie Smyth  ·  隐藏类只在我试图切换的两个部分中的一个部分上工作
    1 年前
    SkyWalker  ·  在JavaScript中,合并日期-时间序列的有效算法是什么?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号