Question

我不知道该怎么做。

我的标记：

<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.  
        });
    });     
});

我要做的是将每个div的高度更改为#colLeft的高度除以#colRight中的div数。

然而，它不起作用。

我从来没有理解如何连接功能，也从未找到任何人教我。

所以我想问你两个好处。

为什么我的上面的jQuery代码不存在。
有没有人知道一个教程解释它比jQuery网站上的教程更详细？

感谢您的时间。

亲切的问候，
的Marius

Answer 1

我不确定是否会看到你的代码为什么它不起作用，但这是一种更直接的方式来实现同样的事情：

$(function() {
  var divs = $("#colRight > div");
  var height = $("#colLeft").height() / divs.length;
  divs.height(height);
});

在jQuery中链接函数没有什么神奇之处。顺便说一句，当人们说“链接”时，他们的意思是：

$("div").css("background", "yellow").addClass("foo");

你唯一需要知道的是，大多数 jQuery方法返回jQuery对象，因此它等同于：

var div = $("div");
div.css("background", "yellow");
div.addClass("foo");

Answer 2

我将解决问题＃1，为什么，那么多教程我不确定什么是最好的。你对链接的整体看法并不遥远，只需要对这条线进行一点调整：

$('#colLeft').height() / $('#colRight > div').length();

你需要添加一个返回，并且不要将.length作为函数调用，如下所示：

return $('#colLeft').height() / $('#colRight > div').length;

函数需要return某些东西（在这种情况下！），.length是一个属性（jquery对象内的对象数组）。但是，在这种情况下，请参阅cletus的答案，这是一个更好的整体解决方案来设置你想要的高度。

Answer 3

关于链接，我会冒这个危险：不要以为你总是可以盲目地链接。大多数核心jQuery和jQuery UI的东西都会链接没有问题，但是一些第三方模块不会返回jQuery对象（这是jQuery libs返回的内容）。

基础知识是这样的：

$（某些选择器）是一个函数调用，其返回值为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;

但有时你会看到他们也接受选项的地方，我不打算进入。您想了解链接如何工作的基础知识，因此我将假设您可以在以后查找更高级的内容。比如阅读非民源。

现在，我之前的警告是，有时jQuery的库会将对象返回给自己，并且库内的对象不能保证是jQueryObject []（再次使用我自己的命名法）。所以这超出了链接的范围。所有库都会告诉你一个对象返回什么，无论是int，string，object，jQuery还是其他什么。

例如，在jQuery .height()页面上，在页面的蓝色栏中，您会看到：.height（）返回：整数但在页面的下方：.height（value）返回：jQuery 在.each()页面上，我们在蓝色栏中看到：.each（function（index，Element））返回：jQuery

因此，您可以看到API文档编写者如何告诉您每个函数返回的内容。这就是你如何知道下一个对象在链接时会采取什么。这就是为什么有时你不能把某些东西连在一起。

好的，这是一次打击的大量信息，但你想要快速和肮脏，如果这不能让你加快速度，我不知道会发生什么。

tl;博士：对不起文字的墙，但这是一个连续的答案。你想知道，回去看看。

Answer 4

传递给height()的函数必须返回一个值。试试你的内部代码：

    $(this).height(function(){ 
        return $('#colLeft').height() / $('#colRight > div').length(); 
    });

至于链接，它在上面的代码中并没有真正发挥作用。基本上，大多数jQuery函数都会返回您刚刚执行的对象。因此，例如，如果在对象上设置高度，则返回该对象。取而代之的是：

$('#someid').height(300);
$('#someid').click(functionName);

你可以这样做：

$('#someid').height(300).click(functionName);

Answer 5

那么两个div应该与左侧列表的高度相同吗？换句话说：

-      --
-      --
-      --
-      --
       +
       +
       +
       +

因为这看起来不对。当然，我使用简单的盒子形状来说明一点，但我想确定一下。好像你宁愿拥有：

-      --
-      --
-      +
-      +

所以，我可能会瞄准（但我还没有在浏览器中尝试过这个：

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

在jQuery中链接函数。我无法在任何地方找到解释

5 个答案: