Question

假设我有类似

的内容

<body>
    <article style="left: xxx; top: xxx">...</article>
    <article style="left: xxx; top: xxx">...</article>
    <article style="left: xxx; top: xxx">...</article>
</body>

我的目标是找到“扇区”中的元素，例如。上/下左/右。然后添加样式类。所以我想我会

找到相对的父母
得到它的宽度＆amp;高度并从那里计算文章/元素的位置

我知道我的文章是相对于身体定位的，但我怎样才能用JS / jQuery动态获取它。我正在创建一个插件，所以我不想硬编码那些相对的父母。

Answer 1

Alex Thomas绝对正确使用javascript来以一种快速加载和降级的方式增强用户体验。

无论如何，这里有一个快速的概念证明jsfiddle，可以完成你所描述的：

<强> Quadrant Based Classes

来源（粗糙）：

var $articles = $("article");
$articles.each(function(){
   var $which = $(this);
   var $parent = $which.parent(); 
   var className = "";

   var pHeight =$parent.outerHeight();
   //alert($which.offset().top + " <> " + (pHeight/2));
   if($which.offset().top < (pHeight/2)){
       className += "Bottom";
   } else {
       className += "Top";
   }

   var pWidth =$parent.outerWidth();
   //alert($which.offset().left + " <> " + (pWidth /2));        
    if($which.offset().left < (pWidth/2)){
        className +="Left";
    } else {
        className +="Right";
    }
    $which.addClass(className);
});

我怎样才能得到相对的父母

1 个答案: