链接功能的!我无法找到一个解释的任何地方
题
我不知道如何做到这一点。
我的标记:
<table>
<tr>
<td id="colLeft">
Lorem ipsum dolor<br/>
Lorem ipsum dolor<br/>
Lorem ipsum dolor<br/>
Lorem ipsum dolor<br/>
Lorem ipsum dolor<br/>
Lorem ipsum dolor.
</td>
<td id="colRight">
<div>1</div>
<div>2</div>
</td>
</tr>
</table>
$(document).ready(function() {
$('#colRight > div').each(function() { // I try to: select all divs in #colRight
$(this).height(function(){ // I try to: sets the height of each div to:
$('#colLeft').height() / $('#colRight > div').length(); // the height of #colLeft divided by the number of divs in colRight.
});
});
});
我试图要做的是改变高度的每个部的高度#colLeft分的数div在#colRight.
然而,它不工作。
我从来没有理解如何链的功能,并且从来没有发现任何人教我的。
所以我想请两个赞成的。
- 为什么不我以上。.
- 任何人都不会知道的一个教程,介绍了它的更详细于在程序上的延的网站?
谢谢您的时间。
亲切的问候,
马里乌斯
解决方案
至于链接,我会害你这样的:不要以为你总是可以盲目的链。大多数核心能力和将技的东西将链没有问题,但是一些第三方的模块将不会返回jQuery的对象(这是什么s库返回)。
基本是这样的:
$(一些选择)是一个功能的电话,有一个返回值jQueryObject[]像这样:
/* in "pretend land" because this isn't accurate */
public jQueryObject[] $( some selector ) {
/* do some magic here with some selector */
return jQueryObject[];
}
因为你是返回的一个jQueryObject[]那么你可以替代它的其他地方。但是魔术的链接说"不管我连接到过一个时期在我左边的我用作输入"。因此,如果我们有:
int a = 20;
和一个功能,像这样:
public int Doubler(int someInt) {
return ( someInt * 2 );
}
然后我们可以链喜欢这样的:
a.Doubler();
并得到40个。但是,如果我们是:
a.Doubler().Doubler();
然后我们会有链接的两倍和我们的结果将是80;
但有时你会看到他们在那里他们也接受的选择,我不会进入。你想的基础上如何链接的工作,所以我假设更先进的东西,你可以以后查询。如阅读非分钟源。
现在,我早警告是,有时候图书馆。会返回一个对象到他们自己和对象的图书馆内不保证是一个jQueryObject[](使用我自己的命名法再)。所以这是范围外的链接。所有的图书馆会告诉你什么对象的回报,它是否是一整串,对象。或什么的。
例如,s .高() 页面,在蓝色吧下一页你看到:.高()返回:整,但进一步下网页:.高(价值)返回:jQuery 和上 .each() 页面,在蓝色吧,我们看到:.每一个(功能(索引、元件))返回:jQuery
所以你可以看到如何API文件作家告诉你什么是正在返回每个功能。这就是你如何知道是什么下一个对象将采取在当链接。这就是为什么有时候你不能链的某些东西在一起。
好的,这是一个很大的信息在一个打击,但是你想要的快速和肮脏的并且如果不把你的速度我不知道什么。
tl博士:对不起墙壁的文本,但它是一个毗连区块的答案。你想知道,回去读它。
其他提示
我会解决问题1, 为什么, ,这么多的教程有我不知道什么是最好的。你的总体图的链接不远,只需要一点点调整这一行:
$('#colLeft').height() / $('#colRight > div').length();
你需要添加一个回返,并呼吁。长度不是作为一个功能,像这样:
return $('#colLeft').height() / $('#colRight > div').length;
一种功能的需要 return
东西(在这种情况下!), 和 .length
是一个属性(对象阵内部延对象)。然而,在这种情况下,看到克莱的回答是,它是一个更好的解决方案总体设置的高度就像你想要的。
我不确定自看一眼你的代码为什么它不工作,但这是一个更简单的方法实现同样的事情:
$(function() {
var divs = $("#colRight > div");
var height = $("#colLeft").height() / divs.length;
divs.height(height);
});
没有什么神奇的有关链接功能的!通过这种方式,当人们说"链接"他们说话,如:
$("div").css("background", "yellow").addClass("foo");
唯一的事情你需要知道的了解是, 大多数 jQuery的方法返回的延对象,所以它是相当于:
var div = $("div");
div.css("background", "yellow");
div.addClass("foo");
功能,你过来 height()
必须返回的价值。试试这个在你内心的代码:
$(this).height(function(){
return $('#colLeft').height() / $('#colRight > div').length();
});
作为链接,它并没有真正发挥作用代码中的上面。基本上,大多数jQuery功能返回的对象只是采取行动。因此,举例来说,如果你设置高度的对象,对象是返回。代替:
$('#someid').height(300);
$('#someid').click(functionName);
你可以这样做:
$('#someid').height(300).click(functionName);
所以两种格的应每是相同的高度左名单?换句话说:
- --
- --
- --
- --
+
+
+
+
因为那看起来并不正确的。当然,我们使用简单的箱子形状的说明一点,但我想确定一下。似乎是您而不是将有:
- --
- --
- +
- +
因此,我可能会为目标(但是我没有尝试过这一浏览器,只是尚未:
$(document).ready(function() {
/* it should already apply the height to "each" so you don't have to do that */
$('#colRight > div').height(
/* I give the line it's own parens so I can make sure the grouping is correct */
( $('#colLeft').height() / $('#colRight > div').length() )
);
});