2 replies to this topic

[webbruno]

Tudo bem pessoal?

Bom, fritei a cabeça e vou pedir ajuda. Estou desde ontem quebrando a cabeça e resolvi pedir ajuda.

Estou estudando JQuery.

O seguinte código:

$.fn.extend({

exemplo: function(){
              $("a", $(this)).live('click',function(event) {
                       event.preventDefault();
                       // pegando o html do link
                       var thtml = $(this).html();
              });
}

});

$("#minhaDiv").exemplo();

<div id="minhaDiv">
          <div id="dvcabecalho">Cabecalho</div>
<a href="pagina1.php">Pagina 1</a>
<a href="pagina2.php">Pagina 2</a>
<a href="pagina3.php">Pagina 3</a>
</div>

Minha pergunta é a seguinte.

É sobre o $(this)

Pelo que penso, estou criando um plugin chamando de exemplo (eu ocultei algumas partes). Esta funcao exemplo tem a caracteristica de pegar todos os links tag A do $(this). Uso a funcao live e dou um bind com o click pra atualizar o dom. Dentro do live $(this) se reporta ao próprio link.

Fora se reporta à div.

Tentei pegar a id desta div não consegui. Só se tiver só ela e os links $(this).parents('div:eq(0)').attr("id")

O fato é que eu sei que neste caso seria o eq(1) e não 0.

Pergunto:

Como posso saber qual é o pai dos links que fez o bind?

[André Manoel]

Depende de onde você está colocando o evento.

Neste caso o $(this) vai se referir a quem sofreu o bind.

Se for o link você já tem a referência dele...

Você não vai precisar do id.

[webbruno]

Olá amigo, obrigado pela resposta.

Então neste exemplo como faria? Para que ao clicar no link ele carregue na div que serve como container para o link?

...
<script>
$.fn.extend({

exemplo: function(){
              $("a", $(this)).live('click',function(event) {
                       event.preventDefault();
                       // pegando o html do link
                       var thtml = $(this).html();
                       // div container.html("Carreguei o link" + thtml);
              });
}

});

$("#minhaDiv").exemplo();

</script>

<div id="minhaDiv">
          <div id="dvcabecalho">Cabecalho</div>
<a href="pagina1.php">Pagina 1</a>
<a href="pagina2.php">Pagina 2</a>
<a href="pagina3.php">Pagina 3</a>
</div>

Neste caso, tenho 3 links, que estão dentro da div "minhaDiv". Eu registro esta "minhaDiv" para o plugin "exemplo" que criei. Sendo assim, os links para esta div, ou seja $("a",$(this)).live()... serão impressos na div, fazendo uma espécie de substituição da div.

Lembrando que, se eu der um alert no thtml eu vejo o conteúdo do link. Ou seja, $(this) dentro do live reporta ao link. Eu sei que para pegar os parents deles eu posso usar o parents. Posso filtrar, posso dar um find e etc.

Minha pergunta é, uma vez que registrei $("#minhaDiv").exemplo(); E que este plugin captura todos os links dela... Como saber qual é a div que disparou?

Pode dar um exemplo?

Obrigado

Ufa!!! Salvo pelo Firebug!!

Depois de usar o Console.log do firebug no meu script consegui ver com detalhes o meu $(this) anterior. com a propriedade select eu obtenho a div do adivinha? Do seletor, ou seja, quem é o container.

Exemplo pra quem não entendeu:

<script>
$.fn.extend({

exemplo: function(){
              var $this = $(this); // Pra não perder a referência lá dentro
              // Buscando todos os links do selector
              $("a", $this).live('click',function(event) {
                       event.preventDefault();
                       // pegando o html do link
                       var thtml = $(this).html(); // pega o A
                       alert($this.selector); // Imprime #minhaDiv
              });
}

});

$("#minhaDiv").exemplo();

</script>

<div id="minhaDiv">
          <div id="dvcabecalho">Cabecalho</div>
<a href="pagina1.php">Pagina 1</a>
<a href="pagina2.php">Pagina 2</a>
<a href="pagina3.php">Pagina 3</a>
</div>