javascript - jquery change tag - Stack Overflow

admin管理员组

文章数量:1287513

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>

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>

• javascript
• jquery
• tags

Share Improve this question Follow edited Jan 28, 2012 at 17:03 PeeHaa 72.7k6060 gold badges194194 silver badges264264 bronze badges asked Sep 11, 2011 at 17:49 IrakliIrakli 1,14366 gold badges3030 silver badges5656 bronze badges 1

• What happens in your example? And won't this be your document? – Paul Grime Commented Sep 11, 2011 at 17:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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);
});

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/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>'));
    });
});

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 puted 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>'));
  });

本文标签： javascriptjquery change tagStack Overflow