Question

HTML:

<ul id="column">
<li id="widget8">
    <div class="testhub"></div>
</li>
</ul>

JS:

if ($("#widget8").parent("#dock")) {
   $(".testhub").html("<p>dock</p>");
}
else {
    $(".testhub").html("<p>not dock</p>");
}​

CSS:

#dock {
    width: 90%;
    height: 100px;
    background-color: blue;
}
#column {
    width: 90%;
    height: 100px;
    background-color: red;
}
#widget8 {
    width: 90%;
    height: 50px;
    background-color: yellow;
}
.testhub {
    width 50%;
    height: 25px;
    background-color: black;
    color: white;
}​

http://jsfiddle.net/zVx8s/1/

All i am trying to do is get the ul that the li is in and if it is on #dock then write something to testhub. But doesn’t seem to work, check the jsfiddle.

I presume i am using parent incorrectly.

Answer 1

Try this: Working demo http://jsfiddle.net/268mh/

Please note you can never have same id’s in DOM. SO I have made widget8 to class instead!

Rest hope demo helps the cause! :)

code

$(".widget8").each(function() {
    if ($(this).parent().prop("id") == "dock") {
        $(this).find(".testhub").html("<p>dock</p>");

    }
    else {
        $(this).find(".testhub").html("<p>not dock</p>");
    }
});​

HTML

<ul id="dock">
<li class="widget8">
    <div class="testhub"></div>
</li>
</ul>

<ul id="column">
<li class="widget8">
    <div class="testhub"></div>
</li>
</ul>
​