CODEWITHSUNDEEP
javascriptjquery
Krish
Krish

Reputation: 2660

Using .hasClass() in if condition is not works

I am having a div when user hover on it will insert a div child div. But the problem is on every hover it added the same div repeatably. so i tried the below script for check if child div availabe in MotherDiv do nothing. else add the Child div. These all are happen on hover. So, What is the wrong with the below code?

Am i missing something? 

if ($('.MotherDiv').hasClass('Child'))
{
alert('alerady a div there!');//DO NOTHING
}
else 
 {        
 var Details= "<div class='MotherDiv'><table class='Special'><tr><td>Offers</td></tr><tr><td>CheckOut Now</td></tr></table></div>";
  $(Child).insertAfter($(this));//This is insert the child div on hover
}

Upvotes: 0

Views: 723

Answers (6)

Ahamed Mustafa M
Ahamed Mustafa M

Reputation: 3139

$(function(){
    var $motherDiv=$('.MotherDiv');
    $motherDiv.bind('mouseenter',
    function(){
        if($motherDiv.find('.ChildDiv').length==0){
            $('<div></div>',{class:'ChildDiv',text:'Child Data Text'}).appendTo($motherDiv);
        }
    });});

Upvotes: 0

Dips
Dips

Reputation: 3290

Are you looking for something like this. Simply adds new Child class if the div doesn't have. If you need to add new child div inside mother div then you just have to customize the code a bit.

http://jsfiddle.net/ETuZB/3/

Upvotes: 1

Sang Suantak
Sang Suantak

Reputation: 5265

Assuming this is the HTML structure you want to generate:

<div class="Mother">
    Mother Div Content
    <div class="Child">
        Child Div to be generated dynamically
    </div>
</div>

jQuery Script:

$(".Mother").hover(function(){
    var motherDiv = $(this);
    if(motherDiv.find(".Child").length == 0) {
        var childDiv = $("<div class='Child'>Child Div Content</div>");
        motherDiv.append(childDiv);
    }
});

Upvotes: 0

vol7ron
vol7ron

Reputation: 42109

The issue may be that you have a string that spans multiple lines.
JavaScript does not handle strings that way. You need to either break the string into parts and concatenate them "..." + "...", or use a line termination escape \ to preserve the newline and following whitespace.

var Details= "<div class='MotherDiv'>
 <table class='Special'>
   <tr><td>Offers</td></tr>
   <tr><td>CheckOut Now</td></tr>
 </table>
 </div>";

To:

var Details = "<div class='MotherDiv'>"
            + "<table class='Special'>"
            + "<tr><td>Offers</td></tr>"
            + "<tr><td>CheckOut Now</td></tr>"
            + "</table>
            + "</div>";

Or:

var Details = "<div class='MotherDiv'>              \
                  <table class='Special'>           \
                     <tr><td>Offers</td></tr>       \
                     <tr><td>CheckOut Now</td></tr> \
                   </table>                         \
                </div>";

Upvotes: 0

ephemient
ephemient

Reputation: 204768

Where is .MotherDiv being added to the document? You don't seem to be inserting $(Details).

Upvotes: -1

epascarello
epascarello

Reputation: 207511

Your JavaScript snipplet you shown above is invalid. You can not have line breaks in it like that.

You can add a \ at the end of the line to denote that it is continued, but it is normally frowned upon as a bad practice.

if ($('.MotherDiv').hasClass('Child')) {
    alert('alerady a div there!');//DO NOTHING
} else {        
    var Details= "<div class='MotherDiv'>\
       <table class='Special'>\
       <tr><td>Offers</td></tr>\
       <tr><td>CheckOut Now</td></tr>\
       </table>\
       </div>";
    $(Child).insertAfter($(this));//This is insert the child div on hover
}

Note, there can not be any characters after the \ or it will error out.

Upvotes: 2

Related Questions