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

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

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

    在列表的最后一项时,我很难试图取消隐藏元素基本上我有一个列表,通过查找类来隐藏和取消隐藏按钮 <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 回复  |  直到 6 年前
        1
  •  1
  •   charlietfl    6 年前

    下面是一些简单的逻辑,它基于 <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    6 年前

    有点不同的方法 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    6 年前 
    <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吗如果没有,你有没有试着删除代码中的那一行?

    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Niobos  ·  如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?
    1 年前
    Alex  ·  在轻量级中同时解构和不解构变量
    1 年前
    Ângelo Rigo  ·  ReactJS映射:如何迭代[关闭]
    1 年前
    bairog  ·  从按属性筛选的对象数组字典中创建值数组
    1 年前
    KaiMcKiernan  ·  基于Math.random()的函数在另一个函数内不起作用[关闭]
    1 年前
    David Jeong  ·  浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    1 年前
    lokiuucx  ·  JS对象属性返回未定义,尽管对象属性应该有值
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号