CODEWITHSUNDEEP
javascriptjqueryhtml
riotgear
riotgear

Reputation: 555

I am having an issue getting jquery to insert html depending on the classname

The problem I am trying to solve. I want to use jQuery to dynamically add content to a div depending on which class is being used. I am not sure why the alerts aren't working. It could be my html or the jquery itself. I want to solve this so that I can have different text appear depending on which class shows up.

Here is the HTML

<td>
    <div class="po size3"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

<td>
    <div class="po size4"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

<td>
    <div class="po size5"></div>
    <a class="external">Find your doctor</a>
    <div class="p-accessible-alt"></div>
</td>

Here is the jQuery

$(document).ready(function() {
    if ($(this).hasClass("size5")) {
        $("div.p-accessible-alt").html("<p> Blah Blah Size5</p>");
    } else if  
        ($(this).hasClass("size4")) {
        alert('TEST!!!');
        $("div.p-accessible-alt").html("<p> Blah Blah Size4</p>");
    } else if  
    ($(this).hasClass("size3")) {
        alert('TEST 3!!!');
        $("div.p-accessible-alt").html("<p> Blah Blah Size3</p>");
    }
});

Upvotes: 2

Views: 80

Answers (4)

user3648492
user3648492

Reputation: 1

The code works once you take out (this) and reference the selector .po because ,as other's have stated, (this) is actually referencing the document.

             <td>
                    <div class="po size3"></div>
                    <a class="external">Find your doctor</a>
                    <div class="p-accessible-alt"></div>
                </td>

                <td>
                    <div class="po size4"></div>
                    <a class="external">Find your doctor</a>
                    <div class="p-accessible-alt"></div>
                </td>

                <td>
                    <div class="po size5"></div>
                    <a class="external">Find your doctor</a>
                    <div class="p-accessible-alt"></div>
                </td>

$(document).ready(function() {
    if ($(".po").hasClass("size5")) {
        $("div.plan-accessible-alt").html("<p> Blah Blah Size5</p>");
    } else if  
        ($(".po").hasClass("size4")) {
            $("div.plan-accessible-alt").html("<p> Blah Blah Size4</p>");
    } else if  
    ($(".po").hasClass("size3")) {
             $("div.plan-accessible-alt").html("<p> Blah Blah Size3</p>");
    }       
});

Upvotes: 0

Jakob
Jakob

Reputation: 104

here is little more generic solution with some suggestions:

  • Use classes only for CSS or JavaScript and prefix your JavaScript-classes with "js-"
  • I would choose a generic approach. So you can add or delete items without changing your JavaScript-code all the time. And in this case it would be a good idea to use an attribute to store item data instead of adding it to the classes

$('.js-add-size').each(function() {
  var jThis = $(this);
  var itemHtml = 'Blah Blah ' + jThis.attr('data-size');
  jThis.find('.js-size-item').html(itemHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="js-add-size" data-size="size3">
      <div class="po"></div>
      <a class="external">Find your doctor</a>
      <div class="p-accessible-alt js-size-item"></div>
    </td>

    <td class="js-add-size" data-size="size4">
      <div class="po"></div>
      <a class="external">Find your doctor</a>
      <div class="p-accessible-alt js-size-item"></div>
    </td>

    <td class="js-add-size" data-size="size5">
      <div class="po"></div>
      <a class="external">Find your doctor</a>
      <div class="p-accessible-alt js-size-item"></div>
    </td>
  </tr>
</table>

And one last thing. Maybe you wanne be even more flexible and use some little template engine, like mustache, instead of doing things like: 

var itemHtml = 'Blah Blah ' + jThis.attr('data-size');

Upvotes: -1

Brad Evans
Brad Evans

Reputation: 728

You don't need the conditional at all. You should just do the following:

$(document).ready(function() {
    $(".size3").nextAll(".p-accessible-alt").html("Your HTML here");
    $(".size4").nextAll(".p-accessible-alt").html("Your HTML here");
    $(".size5").nextAll(".p-accessible-alt").html("Your HTML here");
});

http://codepen.io/bradevans/pen/yaGyZQ?editors=1111

Upvotes: 1

Soviut
Soviut

Reputation: 91525

Your usage of $(this) won't work because you haven't made a selection. In JQuery this is always bound to the context the previous selector or method, it's a JQuery object containing the results of the selection or filter. Additionally, your selector for finding the child element to insert HTML into is too broad.

$("div.p-accessible-alt").html("<p> Blah Blah Size3</p>");

It will select every single <div> with a class of p-accessible-alt and insert the same HTML block into all of them.

You can replace your entire if block with the following selectors (one for each size).

$(".size3").siblings(".p-accessible-alt").html("<p> Blah Blah Size3</p>");
$(".size4").siblings(".p-accessible-alt").html("<p> Blah Blah Size4</p>");
$(".size5").siblings(".p-accessible-alt").html("<p> Blah Blah Size5</p>");

This works by finding the element with the class .sizeX and then traverses up to it's parent container, then back down the hierarchy to find it's descendant with the class .p-accessible-alt and then apply the html to that.

Upvotes: 2

Related Questions