Question

我试图从列表中获取所有可见元素，但我无法找到方法。

我有清单

<ul id="posts">
     <li style="display:none">1</li>
     <li style="display:none">2</li>
     <li>3</li>
     <li style="display:none">4</li>
     <li>5</li>
     <li style="display:none">6</li>
     <li>7</li>
     <li>8</li>
</ul>

我希望获得每一秒的可见元素并添加类＆＃34;可见＆＃34;它。

我想要这个结果

<ul id="posts">
     <li style="display:none">1</li>
     <li style="display:none">2</li>
     <li>3</li>
     <li style="display:none">4</li>
     <li class="visible">5</li>
     <li style="display:none">6</li>
     <li>7</li>
     <li class="visible">8</li>
</ul>

我试过这样的事情

var jQuerylistItems = jQuery('#posts').children('li');
jQuerylistItems.filter(':visible').addClass('visible');

它有效，但不对，有些时候会增加课程，有时候不会，我不确定为什么。

是的，有人能帮帮我吗？感谢

Answer 1

我建议使用以下内容：

jQuery('#posts > li:visible:odd').addClass('visible');

结帐演示here。

Answer 2

这是您的解决方案。并also demo on fiddle

%ju

Answer 3

你可以尝试 .each（）;

$(document).ready(function(){
    $('ul > li').each(function(){
        if($(this).is(':visible')){
            $(this).addClass('visible');
        }
    });
});

Demo

Answer 4

以下是一个解决方案：http://jsfiddle.net/5op0wzv9/。

$('ul > li:visible').each(function(index){
    $(this).addClass(index % 2 === 1 ? "visible" : "");
});

Answer 5

修改addClass()以使用回调，回调的第一个参数是索引

jQuerylistItems.filter(':visible').addClass(function(i) {    
    return i % 2 == 1 ? 'visible' : null;
});

我的理解是只将此类添加到其他所有可见元素中。

您还需要在再次运行之前删除此类，这可能是您遇到的问题的一部分

DEMO

Answer 6

我不知道这是不是你想要的，但是你走了!!希望它有所帮助。

<!DOCTYPE html>
<html lang = 'es'>
    <head>
        <title> MY TEST </title>
        <meta charset = 'utf-8'>
    </head>
    <body>
        <ul id="posts">
            <li style="display:none">1</li>
            <li style="display:none">2</li>
            <li>3</li>
            <li style="display:none">4</li>
            <li>5</li>
            <li style="display:none">6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <script>
            var visibleElements = [];
            var allListElements = document.getElementsByTagName('li'); // Get the reference to al the "li" elements
            var index;

            // Check for each element in array if his display its diferent to "none", if true, add that element to the array "visibleElements"
            for (index = 0; index < allListElements.length; index++){
                if(allListElements[index].style.display != 'none'){ 
                    visibleElements.push(allListElements[index]);
                }
            };

            //Adding the class
            for (var index2 in visibleElements){
                visibleElements[index2].className = 'visible';
                console.log('VISIBLE') // Check if adding the class name is working, if console shows 4 "VISIBLE" then its OK.
            }


        </script>
    </body>
</html>

如何从列表中选择所有可见元素？

6 个答案: