Question

如何在点击时隐藏前五个列表，当我点击它时应该隐藏下一个五个列表。

<script src="jquery.js"></script>
<script>
    $(function(){
        $(".hideList").click({
            $(this).find("ul li:lt(5)").hide();
        })
    })
</script>
<ul>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
  <li>this is list</li>
</ul>
<button class="hideList"></button>

Answer 1

您可以使用解决方案 https://jsfiddle.net/41xzy6w3/

＆＃13;

var cnt = 0;
$('button[class="clickMe"]').click(function(){
	cnt++;
	$('ul li:lt(' + (cnt * 5) + ')').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>this is list - 1</li>
  <li>this is list - 2</li>
  <li>this is list - 3</li>
  <li>this is list - 4</li>
  <li>this is list - 5</li>
  <li>this is list - 6</li>
  <li>this is list - 7</li>
  <li>this is list - 8</li>
  <li>this is list - 9</li>
  <li>this is list - 10</li>
</ul>
<button type="submit" class="clickMe">Click</button>

＆＃13;

每次点击，它都会隐藏5个元素。

Answer 2

在每个click上，它会从列表中删除前2个元素：

＆＃13;

$(".clickMe").on('click', function() {
  $('ul li:not(:hidden):lt(2)').hide();
});

＆＃13;

.clickMe {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>this is list - 1</li>
  <li>this is list - 2</li>
  <li>this is list - 3</li>
  <li>this is list - 4</li>
  <li>this is list - 5</li>
  <li>this is list - 6</li>
  <li>this is list - 7</li>
  <li>this is list - 8</li>
  <li>this is list - 9</li>
  <li>this is list - 10</li>
</ul>
<span class="clickMe">Click</span>

＆＃13;

Answer 3

你需要计算所有LI然后你可以逐个隐藏LI。它很容易找到并使用，因此我在下面发布了方法。

$(function () {

    var rowPosition = 5;
    var rows = $('ul li').length;
    var index = 0;

    $(".hide").on('click', function () {

        for (index; index < rowPosition; index++) {
            $('ul').find('li:eq(' + index + ')').hide();
            if (rowPosition = index) {
                index = rowPosition;
                rowPosition = rowPosition + 5;
            }
        }
    });
});

尝试这个。

如何在jQuery中单击隐藏前五个列表

3 个答案: