Javascript 如何查找屏幕上的ID

我有一个类似的内容

 <div id="sContainer">
    <div class="message0" id="l0">Initial Content 111</div>
    <div class="message1" id="l1">Initial Content 222</div>
    <div class="message2" id="l2">Initial Content 333</div>
    <div class="message3" id="l3">Initial Content 444</div>
    <div class="message4" id="l4">Initial Content 555</div>
    <div class="message5" id="l5">Initial Content 666</div>
    <div class="message6" id="l6">Initial Content 777</div>
 </div>

初始内容111
初始内容222
初始内容333
初始内容444
初始内容555
初始内容666
初始内容777

即使在div内部，我也有一些div（未显示）

是否有任何工具可以找到屏幕上显示的所有div

要求： 1.每次聚焦div时，我都想添加css属性

---

2.我需要存储一个变量

您可以使用

：visible

属性选择器获取显示的元素

$（函数（）{
var divs=$（'[id^=l]：可见'）；
console.log（'显示divs'，divs）；
警报（'显示的分区：'+分区长度）；
});
/*用于测试目的*/
[id^=l]{
/*id以'l'开头*/
显示：无；
}
[id^=l]：第n个孩子（3n）{
/*每三个元素*/
显示：块；
}

初始内容111
初始内容222
初始内容333
初始内容444
初始内容555
初始内容666
初始内容777
与一起使用

可以使用
：visible
伪选择器过滤出
id
中的可见元素。我已经设置了
tabIndex
，以便
可用

请签出下面的工作代码段：


var dataAbc='Focus shift Here'；
//到目前为止，我只准备了1个。要预加多个，请确保使用for循环增加tabIndex。
setTimeout（function（）{$（dataAbc）.prependTo（“#scocontainer”）；}，3000）；
$（“div:visible”）。每个（函数（）{
console.log（$（this.attr（'id'））；
});
$（文档）.on（“focusin”，“div div”，function（））{
$（this.css（“背景”、“黄色”）；
});
$（文档）.on（“focusout”，“div div”，function（））{
$（this.css（“背景”、“白色”）；
});
.message0{边距：30px；高度：200px；边框：10px纯绿色；}
.message1{边距：30px；高度：200px；边框：10px实心黄色；}
.message2{边距：30px；高度：200px；边框：10px纯粉色；}
.message3{边距：30px；高度：200px；边框：10px纯蓝色；}
.message4{边距：30px；高度：200px；边框：10px纯黑色；}
.message5{边距：30px；高度：200px；边框：10px固体青色；}
.message6{边距：30px；高度：200px；边框：10px实心橙色；}
.message7{边距：30px；高度：200px；边框：10px实心红色；}

初始内容111
初始内容222
初始内容333
初始内容444
初始内容555
初始内容666
初始内容777
我想你在找

 $(document).ready(function(){
    var i,classes;
    var divs_num = $('#sContainer div').length;
     for(i = 0 ; i < divs_num; i++){
          Ids= $('#sContainer div:visible').eq(i).attr('id');
         if(typeof Ids !== 'undefined'){
             alert(Ids);
             if(Ids == 'l3' ){
                 $('#'+Ids).css('background','blue');
             }
         }
    }
    $('#sContainer div').on('click',function(){
        $('#sContainer div').css('border','5px solid blue');
        $(this).css('border','5px solid red');
    });
});

$（文档）.ready（函数（）{
变量i，类别；
var divs_num=$（'scocontainer div'）。长度；
对于（i=0；i

代码获取所有可见的div并警告所有可见的div id。。然后检查id l3是否可见，将其背景更改为红色。。在单击事件中，当单击任何div时，将其边框更改为红色，并将所有其他div更改为蓝色边框
您可以使用事件委派来查找关注的元素。请看这个：

关键是向父级添加侦听器，如下所示：

$("#sContainer").click(showMessage);

然后在处理程序中，使用事件检查目标，如下所示：

var focusedElement = $("#" + e.target.id);

focusedElement然后包含一个jQuery对象，该对象指向操作所针对的元素（在小提琴的情况下是单击）

上面的提琴在咔嗒声中工作。如果你想了解焦点，请查看

此外，您的小提琴中的CSS也可以改进。它不是干巴巴的：
要找到视口中的
div
s，需要比jQuery提供的现成功能多一点。你可能需要类似的东西，这是我为这类问题编写的一个类

var viewport = new Viewport(window);

viewport.addEventListener("scroll:complete", function(vp) {
    viewport.querySelectorAll("div.message", function(div) {
        div.classList.add("foo");
    });
});

要在视口中检测的每个
div
都应该有一个公共类，以使代码更易于维护。请注意，从第9版开始，Internet Explorer就受到支持，加上符合标准的普通浏览器。
如果我滚动到10000页怎么办？@chicharito，对不起？请解释清楚。我不清楚你的解释。你说的“屏幕上”是指“在视口中”吗？我想这会有帮助
var viewport = new Viewport(window);

viewport.addEventListener("scroll:complete", function(vp) {
    viewport.querySelectorAll("div.message", function(div) {
        div.classList.add("foo");
    });
});