Funções de encadeamento em jQuery. Não consigo encontrar uma explicação em nenhum lugar

StackOverflow https://stackoverflow.com/questions/2541924

  •  23-09-2019
  •  | 
  •  

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ê.

  1. Por que meu código jQuery acima não.
  2. 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

Foi útil?

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.

mais: http://support.microsoft.com/kb/2891274

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() ) 
                           ); 
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top