Question

＆＃13;

$('li[data-number=4]').after().hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li data-number="0">1</li>
    <li data-number="1">2</li>
    <li data-number="2">3</li>
    <li data-number="3">4</li>
    <li data-number="4">5</li>
    <li data-number="5">6</li>
    <li data-number="6">7</li>
    <li data-number="7">8</li>    
</ul>

＆＃13;

我想隐藏数据4后面的所有元素，并希望获得第一个隐藏的li数字。输出将5.我怎样才能实现这一目标？请帮帮我。

Answer 1

.after()表示：在匹配元素集中的每个元素之后插入由参数指定的内容。 API

您想要的是.nextAll()：获取匹配元素集中每个元素的所有后续兄弟，可选择由选择器过滤。 API

所以你的代码变成了：

$('li[data-number=4]').nextAll().hide();

要隐藏第一个，请使用$('li:hidden').first()。 :hidden和.first()的文档：http://api.jquery.com/hide/，https://api.jquery.com/first/

Answer 2

＆＃13;

$('li:gt(4)').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li data-number="0">1</li>
    <li data-number="1">2</li>
    <li data-number="2">3</li>
    <li data-number="3">4</li>
    <li data-number="4">5</li>
    <li data-number="5">6</li>
    <li data-number="6">7</li>
    <li data-number="7">8</li>    
</ul>

＆＃13;

您只能使用$('li:gt(4)').hide();

Answer 3

您可以使用以下js代码在单行中实现您的目的..！

您需要使用after()方法，而不是使用nextAll()方法。

＆＃13;

var firstHidden = $('[data-number=4]').nextAll().hide().first();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li data-number="0">1</li>
    <li data-number="1">2</li>
    <li data-number="2">3</li>
    <li data-number="3">4</li>
    <li data-number="4">5</li>
    <li data-number="5">6</li>
    <li data-number="6">7</li>
    <li data-number="7">8</li>    
</ul>

＆＃13;

Answer 4

如果简单，为什么不使用循环？获取一个遍历所有列表迭代的每个循环$（ul li）.each（）;然后我们可以访问数据值

Answer 5

请检查：

$('li[data-number=4]').nextAll().hide();
var firstHiddenLiNumber = $('li[data-number=4]').next().data('number');
console.log(firstHiddenLiNumber);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li data-number="0">1</li>
    <li data-number="1">2</li>
    <li data-number="2">3</li>
    <li data-number="3">4</li>
    <li data-number="4">5</li>
    <li data-number="5">6</li>
    <li data-number="6">7</li>
    <li data-number="7">8</li>    
</ul>

jQuery在特定号码后隐藏li

5 个答案: