CODEWITHSUNDEEP
javascriptjquery
Jake
Jake

Reputation: 1370

How to change an h3 to h2 only on specific pages with jQuery/JavaScript

I'm coming across an issue for a client's side that they want to update the h3's to h2's on a couple pages and the data is coming from another source. So what I'm trying to do is change the h3 on the service and the resource pages to h2s. Right now I have the following which sort of but not really works:

<script type="text/javascript">
$(document).ready(function () {
    if(window.location.href.indexOf("services") > -1) {
       $('.u-label h3').replaceWith(function () {
          return $("<h2>", {
            "class",
            this.className,
            html: $(this).html();
          });
        });;
        }
      });
</script>

I thought in theory it should work but I'm getting unexpected token on the comma after class. Am I even close with this? Is there a better/cleaner way of getting the h3 to h2?

Upvotes: 1

Views: 2139

Answers (4)

domdambrogia
domdambrogia

Reputation: 2243

This should yield the same results while using the replaceWith function a little bit differently.

I'm also not sure if the data you are passing in is valid. If you read the docs from jQuery (link above) regarding the replaceWith function and the allowed paramter:

May be an HTML string, DOM element, array of DOM elements, or jQuery object.

You are passing a hybrid of an array and an object. Even if you were passing an array, it would need to be an array of DOM elements and not meta data like you are doing currently.

I chose to find all of the targeted DOM elements and iterate through them one-by-one.

Here's a working fiddle for you: https://jsfiddle.net/2jkqh34n/

You can also access all of the current DOM elements data while iterating through them. I have supplied examples in the code, but not the fiddle.

HTML

<div class="scope">
    <div class="change-these">
        <h2 class="sm">foo</h2>
        <h2 class="md">bar</h2>
        <h2 class="lg">baz</h2>
    </div>

    <div class="omit-these">
        <h2>foo</h2>
        <h2>bar</h2>
        <h2>baz</h2>
    </div>
</div>

JS

$(document).ready(function () {
    $('.scope .change-these h2').each(function (i, el) {
        var c = $(el).attr("class");
        $(el).replaceWith('<h3 class="'+ c +'">' + $(el).html() +'</h3>')
    });
});

This will yeild

<div class="scope">
    <div class="change-these">
        <h3 class="sm">foo</h3>
        <h3 class="md">bar</h3>
        <h3 class="lg">baz</h3>
    </div>

    <div class="omit-these">
        <h2>foo</h2>
        <h2>bar</h2>
        <h2>baz</h2>
    </div>
</div>

Upvotes: 3

Wanton
Wanton

Reputation: 840

Try this. This code should not recreate any h3 child elements. That means if you have any events or jQuery data bound to those child elements they should still work.

<script type="text/javascript">
$(document).ready(function () {
    if (window.location.href.indexOf("services") > -1) {
       $('.u-label h3').each(function () {
          var $h3 = $(this);
          var $h2 = $("<h2>").attr('class', $h3.attr('class')).append($h3.contents());
          $h3.replaceWith($h2);
       });
    }
});
</script>

Upvotes: 0

Akshay Raut
Akshay Raut

Reputation: 413

You are creating a JavaScript object which is expected to have combination of key value pairs. These key value pairs need to be separated by colon (:)

So the code would look like this:

$("<h2>", { "class" : this.className,
        html: $(this).html()
      });

Upvotes: -1

B. Fleming
B. Fleming

Reputation: 7220

Objects in JavaScript must contain key-value pairs. In your case you have the object:

{
    "class",              // Not a key-value pair.
    this.className,       // Not a key-value pair.
    html: $(this).html(); // Is a key-value pair, but should not have a semi-colon.
}

To fix it, you will need to do something like the following: 

{
    class: this.className,
    html: $(this).html()
}

These changes may or may not be exactly what you're looking for, but the general idea remains the same.

Upvotes: 0

Related Questions