Bind to an element. If the element exists, do X if not do Y

is something like this possible with jquery:

<div class="contentcol">
 <div class="rightCol">
 </div>
 <div class="contentArea">
 </div>
</div>

The page will have content injected into ContentCol on click. What I want is something like so:

a live bind. If .rightCol exists && there is NO stuff(html/text) inside, add a class to the 开发者_C百科.contentCol = hideRightCol, if not remove the hideRightCol class if there is stuff inside contentCol.

Suggestions?

Thanks

Using jQuery:

if( $(".rightCol").html() ) {
    $(".contentCol").addClass("hideRightCol");
} else {
    $(".contentCol").removeClass("hideRightCol");
}

var rightcol = $('.rightCol')[0];
if (rightcol && !rightcol.innerHTML)
    $('.rightCol').hide();
else
    $('.rightCol').show();

Try this:

$(".contentcol").live("click", function(){
    var $this = $(this);
    if(
            $this.find(".rightCol").length > 0) &&
            $this.text() == ""
      )
        {
            $this.addClass("hideRightCol");
        }
        else
        {
            $this.removeClass("hideRightCol");
        }
});