CODEWITHSUNDEEP
javascriptjquerytags
Irakli
Irakli

Reputation: 1143

jquery change tag

I have this code that doesn't work, can you help me? I want that I changed tag name "p" of class="s7" to "h1"

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $(".s7").replaceWith($('<h1>' + $(this).html() + '</h1>');
        });
    </script>

Upvotes: 4

Views: 5007

Answers (3)

Pointy
Pointy

Reputation: 414086

The value of this in your "replaceWith()" call is not going to be the "s7" element; it's going to be whatever this is in the greater "document.ready" handler.

To do what you want, use ".each()":

  $('.s7').each(function() {
    $(this).replaceWith($('<h1>' + $(this).html() + '</h1>'));
  });

With that version, jQuery will call the "each" function for each element with class "s7". Inside that function call, furthermore, jQuery arranges for this to refer to one of those DOM elements on each iteration.

To further elaborate the difference, consider that in both my version and yours the argument to "replaceWith()" is computed before ".replaceWith()" is called. That is, the string concatenation expression involving $(this) is evaluated before the function call. Thus, there's just no way for this to take on the value of any element in the chain; JavaScript simply does not work that way.

With the ".each()" loop, however, we can ensure that this has a useful value. Note that ".each()" also passes a reference to the current DOM element as an explicit parameter, so the code could also look like:

  $('.s').each(function(index, element) {
    $(element).replaceWith($('<h1>' + $(element).html() + '</h1>'));
  });

Upvotes: 1

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263187

The problem is that you're matching all the elements with class s7, but you need to process them one by one in order to copy their content into new elements. In your current code, this is always document, not the current element.

You can use each() to iterate over the matched elements:

$(".s7").each(function() {
    var $this = $(this);
    $this.replaceWith($("<h1>" + $this.html() + "</h1>"));
});

Or maybe:

$(".s7").each(function() {
    $("<h1>" + $(this).html() + "</h1>").replaceAll(this);
});

Upvotes: 6

Joseph Silber
Joseph Silber

Reputation: 220176

You're missing a closing parenthesis, and you're using this in the wrong context:

$(document).ready(function(){
    $(".s7").replaceWith($('<h1>' + $(".s7").html() + '</h1>'));
});

http://jsfiddle.net/L82PW/

If you have multiple elements with a class name of s7, use .each():

$(document).ready(function(){
    $(".s7").each(function(){
        $(this).replaceWith($('<h1>' + $(this).html() + '</h1>'));
    });
});

Upvotes: 4

Related Questions