将“of:”属性设置为 jQuery ui 位置插件中的前一个元素答案

【问题标题】：Set "of:" property to previous element in jQuery ui position plugin将“of:”属性设置为 jQuery ui 位置插件中的前一个元素
【发布时间】：2012-05-25 17:51:31
【问题描述】：

我正在使用 jQuery ui 位置插件在它们之前的元素旁边设置一些帮助框，如果我设置了之前的框 id，它就可以工作，但如果我尝试使它更动态，并且为此，我需要它是动态的。让我们看看代码：

CSS

.helpBox {
    width: 150px;
    height: 75px;
    position: absolute;        
    display: block;
    right: 0;
    bottom: 0;
    background-color: #bcd5e6;
    text-align: center;
}

HTML

<asp:TextBox ID="txtInformation" runat="server" TextMode="MultiLine" Rows="5" CssClass="required" ClientIDMode="Static"></asp:TextBox>
<div class="helpBox">This is a helping box.</div>

对不起 asp.net 代码，它只是一个文本框。

$(".helpBox").position({
    of: $("#txtInformation"),
    my: "left center",
    at: "right center",
    offset: "10 0"
});

这行得通，但如果我尝试使用它，以便我可以重复使用它并使它与它不支持的所有帮助框一起工作：

$(".helpBox").position({
    of: $(this).prev(),
    my: "left center",
    at: "right center",
    offset: "10 0"
});

现在我想知道如何使它工作。该属性应该处理它，但不知何故它不是。谁能告诉我我做错了什么？

谢谢。

【问题讨论】：

标签： jquery user-interface position css-position

【解决方案1】：

您将一个对象传递给.position 函数。该对象在传递给函数之前被定义，因此$(this).prev() 将在调用该方法的代码的上下文中进行评估。 this不会，一定要在此处参考您的.helpBox。

但是，如果您使用 $.each 迭代您的帮助框，那么每次迭代时的 this 将引用实际的框：

$('.helpBox').each(function() {
   $(this).position({
     of: $(this).prev(),
     my: "left center",
     at: "right center",
     offset: "10 0"
   });
});

Demo

【讨论】：

我只是想在物业内部做这样的事情。无论如何，它对我不起作用，对你有用吗？
啊，抱歉，position 是一个 jQuery UI 函数，而不是标准 jQuery 库的一部分，所以它的行为与我预期的不完全一样，而且看起来你不能执行这样的基于集合的操作。您必须遍历集合，请参阅我的更新。