Javascript 如何确定位于可见屏幕右侧x像素处的div的元素ID？_Javascript_Html_Jquery_Css

Javascript 如何确定位于可见屏幕右侧x像素处的div的元素ID？

javascript html jquery css

Javascript 如何确定位于可见屏幕右侧x像素处的div的元素ID？,javascript,html,jquery,css,Javascript,Html,Jquery,Css,用这个碰壁，希望有人能帮忙。我有一个包装器div，其中包含许多固定宽度的“content”div。它就像一个表格，只是“每行”的项目数不是固定的，所以每当屏幕变宽时，屏幕上就会有更多的项目。非常基本此外，每个“内容”div都有一个相邻的默认隐藏的“详细信息”div（“style=display:none”），以及一个相邻的空“分隔符”div，其中仅包含样式“clear:both；” 每个content/details/separator div的ID中都有一个唯一的编号，这样我就可以知道它们是

用这个碰壁，希望有人能帮忙。我有一个包装器div，其中包含许多固定宽度的“content”div。它就像一个表格，只是“每行”的项目数不是固定的，所以每当屏幕变宽时，屏幕上就会有更多的项目。非常基本

此外，每个“内容”div都有一个相邻的默认隐藏的“详细信息”div（“style=display:none”），以及一个相邻的空“分隔符”div，其中仅包含样式“clear:both；”

每个content/details/separator div的ID中都有一个唯一的编号，这样我就可以知道它们是相关的（例如content123、details1234、separator1234）

现在，当单击其中一个内容div时，我想显示它下面的“details”div。这一部分，我已经完成了部分工作，通过在content div周围包装一个锚定标记，它触发一个onClick javascript事件，然后运行一个jQuery语句，使细节和分隔符divs

jQuery（.details1234”）.css（“display”，“block”）；“

但你可以想象我的问题。一旦那个“分隔符”div被激活，它就会向下（清除）任何出现在它右边的“内容”div，丑陋。我的想法，我已经绞尽脑汁几个小时了，就是要显示内容div的“分隔符”div，这是点击的“行”中最后一个出现的div。这样，一个新的“行”将由分隔符打开，这样当显示“content”div时，它将显示在新行中单击的项目下方。为此，我需要计算出“行”中最后一个内容div的elementID，我正在考虑使用鼠标单击事件的Y坐标，加上包装div最右边的X坐标减去固定宽度内容div的一半。类似的东西。但是我被撞墙了，弄不明白

有人能帮我吗？或者提供不同的解决方案？如果示例代码有助于让我知道，我可以快速创建一个示例，但在本文中可能需要一些屏幕空间

谢谢大家。。这简直是疯了

编辑：下面的示例代码基于我的站点。单击单元格时，可以看到其下方显示的“details”div，但不幸的是，“row”中的其他div被按下。这就是我试图避免的效果。单击单元格时，我希望“详细信息”显示在其下方，但也希望其他div保持在其他单元格详细信息上方的位置，基本上我希望“行”保持不变。在代码中，您可以看到我使用“分隔符”div进行的毫无结果的实验，因为我的假设是，如果我可以在行中最后一个div之后插入该div，那么“details”div将成为下一行，然后是下一行单元格。希望我能解释清楚。感恩节大餐导致血液从大脑中流出；）


#包装纸{
背景:#中交;；
垫面：4px；
左侧填充：4px；
右侧填充：4px；
垫底：4px；
边缘顶部：5px；
}
.contentcell{
边框：2件纯蓝；
填充：4px；
浮动：左；
宽度：200px；
}
.分离器{
明确：两者皆有；
显示：无；
}
.详情{
背景：浅绿色；
边框：2倍纯绿；
宽度：450px；
显示：无；
浮动：左；
明确：两者皆有；
}
函数showDetails（contentid）{
//首先，重置所有高光并关闭所有打开的内容div
$（“#overallwrapper.contentcell”）.css（“border”，“2px纯蓝色”）；
$（“.details”）.css（“显示”、“无”）；
$（“.separator”）.css（“显示”、“无”）；
//现在突出显示单击的div并显示其内容div
var contentHI=“#content”+contentid；
var detailsON=“#details”+contentid；
var separatorON=“#separator”+contentid；
$（contentHI）.css（“边框”，“2倍纯绿色”）；
//$（分隔符）.css（“显示”、“块”）；
$（detailsON）.css（“显示”、“块”）；
}
以下是有关cell01的详细信息
下面是有关cell02的详细信息
以下是有关cell03的详细信息
以下是有关cell04的详细信息
以下是有关cell05的详细信息
下面是有关cell06的详细信息

用户

如果您将常规位置设为默认位置，则当其他内容进入squence时，它会将其完全向下推

将隐藏的divs位置更改为绝对，这样它将不按顺序排列，并且您可以按top和left属性将其放置在页面上的任何位置

获取要在旁边显示的div的偏移量

它将具有顶部和左侧属性，使用这些属性的位置和它们旁边的位置

如果你还需要什么，请告诉我

为隐藏的div指定一个更大的z-索引。

在所有其他内容之上，使用

位置：绝对

显示细节

div

怎么样？（看，代码有点凌乱，但你明白了）。

我部分理解了它，但逻辑可能非常笨拙。我基本上是从容器div的宽度向左走100px，直到找到一个内容div。另外，它在IE8中不起作用，因为IE从jQuery的offset（）或position（）得到的结果与firefox不同，它总是报告“19”。所以在IE中，我永远无法得到Y坐标值。我现在太困了，今天不能再做这个了。如果有人能帮我一把，或者告诉我如何改进javascript，那就太酷了

以下是Firefox的工作代码（与原始问题相比，我更改了detail div的javascript和css）：


#包装纸{
背景:#中交;；
垫面：4px；
左侧填充：4px；
右侧填充：4px；
垫底：4px；
页边空白：
    <html>
  <head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <style type="text/css">

  #overallwrapper{
    background: #CCCCCC; 
    padding-top: 4px; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom: 4px; 
    margin-top: 5px;  
  }


 .contentcell{
    border: 2px solid blue; 
    padding: 4px;
    float: left; 
    width: 200px;
  }

  .separator{
    clear:both;
    display: none;
  }


  .details{
    background:lightgreen;
    border: 2px solid green;
    width:450px;
    display:none;
    float:left;
    clear:both;
  }
</style>

<script type="text/javascript">
function showDetails(contentid){

   //first, reset all highlights and close any open content divs
   $("#overallwrapper .contentcell").css("border","2px solid blue");
   $(".details").css("display","none");
   $(".separator").css("display","none");   

   //now highlight the clicked div and reveal its content div
   var contentHI = "#content"+contentid;
   var detailsON = "#details"+contentid;
   var separatorON = "#separator"+contentid;
   $(contentHI).css("border","2px solid green");
   //$(separatorON).css("display","block");   
   $(detailsON).css("display","block");
 }
</script>
</head>

<body>
  <div id="overallwrapper">
      <div id="contentwrapper01">
        <div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div> 
        <div id="details01" class="details">here are details about cell01</div>   
        <div id="separator01" class="separator">&nbsp;</div>
      </div>
      <div id="contentwrapper02">
    <div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div> 
        <div id="details02" class="details">here are details about cell02</div>   
        <div id="separator02" class="separator"></div>
      </div>
      <div id="contentwrapper03">
        <div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div> 
        <div id="details03" class="details">here are details about cell03</div>   
        <div id="separator03" class="separator"></div>
      </div>
      <div id="contentwrapper04">
        <div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div> 
        <div id="details04" class="details">here are details about cell04</div>   
        <div id="separator04" class="separator"></div>
      </div>
      <div id="contentwrapper05">
        <div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div> 
        <div id="details05" class="details">here are details about cell05</div>   
        <div id="separator05" class="separator"></div>
      </div>
      <div id="contentwrapper06">
        <div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div> 
        <div id="details06" class="details">here are details about cell06</div>   
        <div id="separator06" class="separator"></div>
      </div>
      <div style="clear:both;"></div><!-- to prevent parent collapse -->
 </div>
</body>
</html>

    <html>
  <head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <style type="text/css">

  #overallwrapper{
    background: #CCCCCC; 
    padding-top: 4px; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom: 4px; 
    margin-top: 5px;  
  }


 .contentcell{
    border: 2px solid blue; 
    padding: 4px;
    float: left; 
    width: 200px;
  }

  .separator{
    clear:both;
    display: none;
  }


  .details{
    background:lightgreen;
    border: 2px solid green;
    display:none;
    clear:both;
  }
</style>

<script type="text/javascript">
function showDetails(contentid){

   //first, reset all highlights and close any open content divs
   $("#overallwrapper .contentcell").css("border","2px solid blue");
   $(".details").css("display","none");
   $(".separator").css("display","none");   

   //now highlight the clicked div and reveal its content div
   //first, figure out which separator to display.
   //1.get the y-pos from the clicked element, this gives y-coord of the row
   contentClicked = "#content"+contentid;
   var clickedoffset = $(contentClicked).offset();
   var ypos = clickedoffset.top;
   var wrapperwidth = $("#overallwrapper").width();
   for (var xpos=wrapperwidth; xpos>0; xpos-=100){
       var elematpos = document.elementFromPoint(xpos, ypos);
       var elematposid = elematpos.id;
       if (elematposid.substring(0,7) == "content") {
         var lastcontentdivID = elematposid.substring(7);
         break;
       }
   }

   $(contentClicked).css("border","2px solid green");
   var detailsON = "#details"+contentid;
   $(detailsON).css("display","block");
   var lastidonscreen = "#content"+lastcontentdivID;
   $(detailsON).insertAfter(lastidonscreen);

 }
</script>
</head>

<body>
  <div id="overallwrapper">
      <div id="contentwrapper01">
        <div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div> 
        <div id="separator01" class="separator">&nbsp;</div>
        <div id="details01" class="details">here are details about cell01</div>   
      </div>
      <div id="contentwrapper02">
    <div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div> 
        <div id="separator02" class="separator"></div>
        <div id="details02" class="details">here are details about cell02</div>   
      </div>
      <div id="contentwrapper03">
        <div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div> 
        <div id="separator03" class="separator"></div>
        <div id="details03" class="details">here are details about cell03</div>   
      </div>
      <div id="contentwrapper04">
        <div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div> 
        <div id="separator04" class="separator"></div>
        <div id="details04" class="details">here are details about cell04</div>   
      </div>
      <div id="contentwrapper05">
        <div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div> 
        <div id="separator05" class="separator"></div>
        <div id="details05" class="details">here are details about cell05</div>   
      </div>
      <div id="contentwrapper06">
        <div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div> 
        <div id="separator06" class="separator"></div>
        <div id="details06" class="details">here are details about cell06</div>   
      </div>
      <div style="clear:both;"></div><!-- to prevent parent collapse -->
 </div>
</body>
</html>

    <html>
  <head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <style type="text/css">

  #overallwrapper{
    background: #CCCCCC; 
    padding-top: 4px; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom: 4px; 
    margin-top: 5px;

  }

 .contentwrapper{
  }

 .contentcell{
    padding: 4px;
    float: left; 
    width: 200px;
    height: 100px;
   border: 2px solid blue;
  }

  .separator{
    clear:both;
    display: none;
  }


  .details{
    background:lightgreen;
    border: 2px solid green;
    display:none;
    clear:both;
  }
</style>


<script type="text/javascript">
function showDetails(contentid){

   //first, reset all highlights and close any open content divs
   $("#overallwrapper .contentcell").css("border","2px solid blue");
   $(".details").css("display","none");
   $(".separator").css("display","none");   

   var contentClicked = "#content"+contentid;
   var thisypos = $(contentClicked).offset().top;
   var nextdivid = contentClicked;
   var countid = contentid;
   do
     {
     var prevdivid = nextdivid;
     var nextcontentid = (countid * 1) + 1;
     var nextcontentid = '' + nextcontentid;
     if ( nextcontentid.length < 2) 
     {  nextcontentid = "0" + nextcontentid; }
     nextdivid = "#content" + nextcontentid;
     if ( $(nextdivid).length ) {
       var nextypos = $(nextdivid).offset().top;
       countid++;
     } else {
       break;
     }
   }
   while (thisypos == nextypos);

   $(contentClicked).css("border","2px solid green");
   var detailsON = "#details"+contentid;
   $(detailsON).css("display","block");
   $(detailsON).insertAfter(prevdivid);

 }
</script>
</head>

<body>
  <div id="overallwrapper">
      <div id="contentwrapper01" class="contentwrapper">
        <div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div> 
        <div id="separator01" class="separator">&nbsp;</div>
        <div id="details01" class="details">here are details about cell01</div>   
      </div>
      <div id="contentwrapper02" class="contentwrapper">
    <div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div> 
        <div id="separator02" class="separator"></div>
        <div id="details02" class="details">here are details about cell02</div>   
      </div>
      <div id="contentwrapper03" class="contentwrapper">
        <div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div> 
        <div id="separator03" class="separator"></div>
        <div id="details03" class="details">here are details about cell03</div>   
      </div>
      <div id="contentwrapper04" class="contentwrapper">
        <div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div> 
        <div id="separator04" class="separator"></div>
        <div id="details04" class="details">here are details about cell04</div>   
      </div>
      <div id="contentwrapper05" class="contentwrapper">
        <div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div> 
        <div id="separator05" class="separator"></div>
        <div id="details05" class="details">here are details about cell05</div>   
      </div>
      <div id="contentwrapper06" class="contentwrapper">
        <div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div> 
        <div id="separator06" class="separator"></div>
        <div id="details06" class="details">here are details about cell06</div>   
      </div>
      <div style="clear:both;"></div><!-- to prevent parent collapse -->
 </div>
</body>
</html>