Problem to attack son and doubt in this use

Question

I’m having trouble understanding the use of this.

I have the following structure:

<div id="a" class="clsa">
    bbb
</div>

<div id="b" class="clsb">
    <span id="bb" clsbb> Conteudo bb </span>
</div>

I wanted to attack any of the elements at the time of reading it. I am doing this way and this working:

$("#a").ready(function() {
    //Chamando uma função e passando parametros funcionar normalmente, eu queria poder atacar daqui de dentro este mesmo elemento "#a".
})

Now I wish I could take the span of b following the same idea of the previous one and attack this span:

$("#b").ready(function() {
    //Chamar o span e atacar ele (fazer alguma coisa, mudar o texto, colocar uma classe)
})

I’m trying with this, but it’s not rolling. It’s calling Document and not this element:

$("#b").ready(function() {
    this.text("teste");
})

I’m wearing the right one?

I’m making the call "$("#a"). ready(.." right?

I’m making a mistake somewhere?

If it was to attack it after q the page was loaded just change the ready to load equal $(document). ready and (window). load?

Help me with

Answer 1

When you use this for the element that triggered the event, you will need to use it as a jquery selector:

$("#a").ready(function(){
      $(this).html("Oii");
      //Onde $(this) = $("#a");
});

This rule changes when Voce is inside repeat loops, for example, when $(this) will reference the reading element itself:

$("#a").ready(function(){
      $.each($("#minhaUl li"), function(index){
            $(this).html("Oii");
            //Onde $(this) = elemento li em leitura;
      });
});

Which means that this has different value, according to the execution context.

http://www.digital-web.com/articles/scope_in_javascript/

To manipulate the inner elements to the listener of the event, has a number of ways to do.

$("#b").ready(function() {
    $("#b > span").html("Oii");
    $("#b span").html("Oii");
    $("#b").find("span").html("Oii"); //$(this).find("span").html("Oii");
    ... //e outras
})

https://api.jquery.com/child-selector/

https://api.jquery.com/children/

https://api.jquery.com/find/

https://api.jquery.com/nth-child-selector/

But one thing I don’t understand is why are you using $(element).ready(...), pq if you just want to assign a value or something like that, you could use:

$(document).ready(function(){ $("#b").find("span").html("Oii"); ... });

Answer 2

With Jquery you can use child selector ( > ) to reach the span from inside the div #b.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$("#b").ready(function() {
    $("#b > span").html("teste");
})
</script>

<div id="b" class="clsb">
    <span id="bb"> Conteudo bb </span>
    <br>outra coisa q vai continuar aqui 
</div>

Answer 3

The method $(Document).ready() will be called at the time of page construction, just this, if you have any posts with ajax for example in your code, after the call of this method the $(Document).ready() will not be called. The second point is the use of this following example:

$("#b").ready(function() {
    // this nesse caso é o objeto #b
    this.text("teste");
})

The this will always be the object that called the method, if you want to use it in $(Document).ready() there is no need to use this way above, example:

$(document).ready(function() {
   $("#bb").text("teste");
})

The use you gave example above, is more in cases of sweeping some list or something similar, example:

// varre todas as divs da página setando nas spans que estão dentro das divs

$("div").each(function()
{
// this nesse caso é a div atual
  $(this).find("span").css("color","red");
})

$("#bb").click(function()
{
// nesse caso o this é a span #bb
$(this).text("teste");
})