take the html of a $('a'). index(this);

Asked

Viewed 36 times

1

A simpler example of what I want would be the following:

$(document).ready(function(){
    $('a.excluir').click(function(){
        var i = $('a').index(this);
        alert(i);
    });
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class='excluir'>link 1</a>
<a href="#" class='excluir'>link 2</a>
<a href="#" class='excluir'>link 3</a>

<a href="#" class='cadastrar'>link 4</a>
<a href="#" class='cadastrar'>link 5</a>
<a href="#" class='cadastrar'>link6</a>

With this code I have returned only the element a who received the click.

Now how to read the html() his?

Using

i.html()

did not. Nor 

i.text()

Official code of the question:

// JavaScript Document
$(document).ready(function(e) {

  $("a.excluiPlano").click(function() {

      if (confirm('Deseja Excluir este Plano?\nAtenção: Excluindo esse plano, todas as fotos serão excluidas!\nDeseja prosseguir?') ) {

        $.ajax({
            url: "../_requeridos/excluiPlano.php",
            type: 'POST',
            data: {'planoid': $(this).attr('planoid')},
            beforeSend: function() {    

              $(this).html("<img src='../_img/_bannerImgs/spinner.gif' />")

            },
            success: function (retorno) {

                if (retorno == 1) {

                    alert('Excluido com sucesso');
                    location.reload();

                } else {

                    alert("Erro na exclusão");

                }

            },
            cache: false,
            /* REMOVIDAS PARA QUE O AJAX ENVIE VARIÁVEIS FORA DO FORM/
            contentType: false,
            processData: false
            */
        });

        return false;

      }

  })


});
jquery

1 answer

2


You must use html(), but not in the i (which is the index of the element), but in the element itself that was clicked (in this case, this):

$(document).ready(function(){
    $('a.excluir').click(function(){
        var texto = $(this).html();
        alert(texto);
    });
});
<script type="text/javascript"   src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class='excluir'>link 1</a>
<a href="#" class='excluir'>link 2</a>
<a href="#" class='excluir'>link 3</a>

<a href="#" class='cadastrar'>link 4</a>
<a href="#" class='cadastrar'>link 5</a>
<a href="#" class='cadastrar'>link6</a>

In the case, $('a.excluir') only executes code for tags a whose class is excluir. You can change the selector according to what you need ($('a') runs for all links, for example).

Only in your case, you’re calling this code inside an ajax event, and I believe in this scope the this no longer refers to the element a and yes to any ajax object. In this case, you’d better set the this in some variable and use it within the beforeSend:

$("a.excluiPlano").click(function() {
    var link = this;
    $.ajax({
    // ...
        beforeSend: function() {    
          // não usar "this" aqui, pois ele provavelmente vai se referir a algum objeto do ajax
          $(link).html("<img src='../_img/_bannerImgs/spinner.gif' />")
        },

  • And the index tb follows the same logic: var i = $(this).index()

  • understood. But what if in the case of these elements a, have in common the same class? Because there are other links on the page with other features

  • PLEASE, I’m sorry, I was changing my post and I ended up changing yours by mistake. Disregard the change.

  • html() takes everything that’s between <a> and </a>. If you want to filter by class and other features, you can change the selector $() according to what you need. But the way it was done, $('a').click calls this code for all links that are clicked, and this will refer to the link that was clicked, regardless of class, attributes, etc

  • @Carlosrocha I updated the answer

  • Just one more thing: In this case I click on Link 3 and I would like to change this text to Link 3125. How to do it? In this case, what I have is an image. I imagine the process should be the same.

  • I did it the way below but it didn’t work $(this). html("<img src='.. /_img/_bannerImgs/spinner.gif' />")

  • Just call html with the text you want to put. Ex: $(this).html("Link 3125"). In the documentation you have more examples: http://api.jquery.com/html/

  • did it but it didn’t work. I’ll put the full code at the end of the question. Take a look at it please!

  • @Carlosrocha should work, maybe the problem is the image path or some other detail of the page

  • I’ve noticed that. The other image doesn’t even leave the scene. The problem isn’t the way

  • Maybe it’s some detail in the function ajax. Anyway, if you want to show an image while ajax is processed, maybe this approach is better than changing the link image: https://stackoverflow.com/a/4684771

  • strange that if I spin: $("a.excluiPlano"). html imagns of all a.classm change but like $(this). html does not change

  • $(this) is not entering ajax

  • I suggest debugging, placing an Alerts, etc, to see if that line is called. But I think it’s because the function is being called within the event beforeSend, and the this no longer refers to the element a (yes to some ajax object). What if you put it right at the beginning (before the if(confirm) something like var link = this and use the variable link within the beforeSend?

  • @Carlosrocha I updated the answer

  • exactly what happens. Inside the before I think this would be the Ajax.

  • I thought about going up the level like $(this). Closest($(this)). html(). But it doesn’t work either. But, anyway, it helps to solve the problem

  • 1

    this way the figure is only changing after the posting of ajax. Believe?

  • I believe :) Whenever I go to mess with ajax, I spend more time with these things of changing image and other "wrinkles" than doing the logic itself. I’m glad you could work it out!

Show 15 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.