Question

我有像

这样的内容

 <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>

http://jsfiddle.net/LRLR/0sbdttds/

即使在div中，我还有一些div（未显示）

有没有找到哪些div在屏幕上可见？

要求： 1.每次div聚焦，我想添加css属性 2.我需要存储一个变量

Answer 1

您可以使用:visible属性选择器来获取显示的元素

$(function() {
  var divs = $('[id^=l]:visible');
  console.log('shown divs', divs);
  alert('divs shown: ' + divs.length);
});

/* for testing purpose */

[id^=l] {
  /* id starting with `l` */
  display: none;
}
[id^=l]:nth-child(3n) {
  /* every third element */
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

Jquery Visible Selector

使用Starts With Selector

$("div[id^='l']:visible").addClass("Your_Class_Name");

Answer 3

可以使用id伪选择器过滤掉:visible的可见元素。我设置了tabIndex，以便<div>可以使用var dataAbc = '<div class="message7" tabindex="1">Focus Shifted Here</div>'; // I am prepending just 1 <div> as of now. To prepend multiple <div>s, make sure to increment the tabIndex using a for loop. setTimeout(function(){ $(dataAbc).prependTo("#sContainer");},3000); $("div:visible").each(function(){ console.log($(this).attr('id')); }); $(document).on("focusin", "div div", function(){ $(this).css("background", "yellow"); }); $(document).on("focusout", "div div", function(){ $(this).css("background", "white"); });。

请查看下面的工作代码段：

.message0 {margin: 30px;height: 200px;border: 10px solid green;}
.message1 {margin: 30px;height: 200px;border: 10px solid yellow;}
.message2 {margin: 30px;height: 200px;border: 10px solid pink;}
.message3 {margin: 30px;height: 200px;border: 10px solid blue;}
.message4 {margin: 30px;height: 200px;border: 10px solid black;}
.message5 {margin: 30px;height: 200px;border: 10px solid cyan;}
.message6 {margin: 30px;height: 200px;border: 10px solid orange;}
.message7 {margin: 30px;height: 200px;border: 10px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sContainer">
  <div class="message0" id="l0" tabindex="2">Initial Content 111</div>
  <div class="message1" id="l1" tabindex="3">Initial Content 222</div>
  <div class="message2" id="l2" tabindex="4">Initial Content 333</div>
  <div class="message3" id="l3" tabindex="5">Initial Content 444</div>
  <div class="message4" id="l4" tabindex="6">Initial Content 555</div>
  <div class="message5" id="l5" tabindex="7">Initial Content 666</div>
  <div class="message6" id="l6" tabindex="8">Initial Content 777</div>
</div>

{{1}}

Updated jsFiddle

查看以下文档链接：

Answer 4

我认为你正在寻找

 $(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');
    });
});

DEMO代码获取所有可见的div并警告所有可见的div ID ..然后检查例如id l3，如果它的可见将其背景更改为红色..并在click事件中点击任何div更改其边框为红色并将所有其他div更改为蓝色边框

Answer 5

您可以使用事件委派来查找正在关注的元素。请参阅：http://jsfiddle.net/0sbdttds/1/

关键是要向父级添加一个监听器，如下所示：

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

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

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

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

以上小提琴适用于点击。如果您想要重点检查How to focus div?

此外，您的小提琴中的CSS可以改进。它不是DRY：http://csswizardry.com/2013/07/writing-dryer-vanilla-css/

Answer 6

要查找视口中的div，需要比jQuery提供的更多功能。你可能需要像Viewport这样的东西，这是我为这类问题写的一个类。

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，加上符合标准的标准浏览器。

如何找到屏幕上的ID

6 个答案: