2

我不知道该怎么做。

我的标记：

<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数。

但是，它不起作用。

我从来不明白如何链接函数，也从来没有找到任何人教我。

所以我想请你帮两个忙。

  1. 为什么我上面的 jQuery 代码没有。
  2. 有谁知道比 jQuery 网站上的教程更详细地解释它的教程？

感谢您的时间。

亲切的问候，
马吕斯

4

5 回答 5

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");
于 2010-03-29T23:32:24.557 回答
1

我将解决问题 #1，为什么，那里有这么多教程，我不确定什么是最好的。您对链接的整体看法并不遥远，只需要在这条线上稍作调整：

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

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

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

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

于 2010-03-29T23:34:38.940 回答
1

至于链接，我会冒昧地告诉你：不要以为你总是可以盲目地链接。大多数核心 jQuery 和 jQuery UI 东西都可以毫无问题地链接，但是一些第三方模块不会返回 jQuery 对象（这是 jQuery 库返回的）。

基本情况是这样的：

$( some selector ) 是一个函数调用，它的返回值为 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；

但有时你会看到他们也接受选项，我不打算讨论。您想要了解有关链接如何工作的基础知识，因此我假设您可以稍后查找更高级的内容。比如读取非min源。

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

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

因此，您可以看到 API 文档作者如何告诉您每个函数返回的内容。这样你就可以知道下一个对象在链接时会接受什么。这就是为什么有时你不能将某些事情链接在一起。

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

tl; dr：对于文字墙感到抱歉，但这是一个连续的答案。你想知道，回去读它。

于 2010-03-29T23:40:07.963 回答
0

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

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

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

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

你可以这样做：

$('#someid').height(300).click(functionName);
于 2010-03-29T23:33:30.230 回答
0

那么这两个 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() ) 
                           ); 
});
于 2010-03-29T23:36:00.530 回答