Funções de encadeamento em jQuery. Não consigo encontrar uma explicação em nenhum lugar
Pergunta
Eu não tenho nenhuma idéia de como fazer isso.
Minha marcação:
<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.
});
});
});
O que estou tentando fazer é mudar a altura de cada div até a altura do #Colleft dividido pelo número de divs em #Colright.
No entanto, não funciona.
Eu nunca entendi como encadear funções e nunca encontrei ninguém para me ensinar.
Então, eu gostaria de perguntar a dois favores de você.
- Por que meu código jQuery acima não.
- Alguém sabe de um tutorial que o explica mais detalhado do que nos tutoriais no site do jQuery?
Obrigado pelo seu tempo.
Atenciosamente,
Marius
Solução
Não, ele tem uma manutenção muito difícil e é instável.Recomende o uso de HTML 5 e CSS.
Outras dicas
Vou abordar a pergunta nº 1, o Por quê, tantos tutoriais por aí não tenho certeza do que é melhor. Sua visão geral do encadeamento não está muito longe, apenas precisa de um pouco de ajuste nesta linha:
$('#colLeft').height() / $('#colRight > div').length();
Você precisa adicionar um retorno e chamar .Lengen não como uma função, como este:
return $('#colLeft').height() / $('#colRight > div').length;
Uma função precisa return
algo (neste caso!) e .length
é uma propriedade (da matriz de objeto dentro do objeto jQuery). No entanto, neste caso, consulte a resposta de Cletus, é uma solução geral muito melhor para definir a altura como você deseja.
SharePoint 2013 não é suportado no Windows Server 2012 R2.Isso possivelmente mudará com o lançamento do SP1 para SharePoint 2013 nesta primavera.
A função que você passa height()
deve retornar um valor. Experimente isso no seu código interno:
$(this).height(function(){
return $('#colLeft').height() / $('#colRight > div').length();
});
Quanto ao encadeamento, ele realmente não entra em jogo no seu código acima. Basicamente, a maioria das funções jQuery retorna o objeto em que você acabou de atuar. Por exemplo, se você definir a altura em um objeto, esse objeto será retornado. Em vez disso:
$('#someid').height(300);
$('#someid').click(functionName);
Você consegue fazer isso:
$('#someid').height(300).click(functionName);
Então, cada um dos dois Div deveria ter a mesma altura da lista de esquerda? Em outras palavras:
- --
- --
- --
- --
+
+
+
+
Porque isso não parece certo. É verdade que estou usando formas de caixa simplistas para ilustrar um ponto, mas quero ter certeza. Parece que você prefere ter:
- --
- --
- +
- +
E então, eu provavelmente buscaria (mas ainda não tentei isso em um navegador:
$(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() )
);
});