CODEWITHSUNDEEP
jquery
themarcuz
themarcuz

Reputation: 2583

jquery selector get element with a class inside a div

I'm dealing with jquery selector. I have a portion of html that (simplified) looks like

<div class="tile">            
      message
      <a href="#" class="ui-icon ui-icon-pencil">link1</a>
      <a href="#" class="ui-icon ui-icon-close">linkb</a>    
</div>

this div is repeated severl times in the page

and in the relative javascript I want to add the code to show or hide the 2 links when the user pass the mouse over the "tile" div. I wrote something like

$(function () {
    $(".tile").bind("mouseover", function () {
        $("this .ui-icon").show();
    });
    $(".tile").bind("mouseout", function () {
        $("this .ui-icon").hide();
    });
});

but this doesn't work. Anyone can help me here?

Upvotes: 0

Views: 10609

Answers (10)

John Gibb
John Gibb

Reputation: 10763

To limit your selector to a parent element, use either:

$(this).find(".ui-icon")

Or:

$('.ui-icon', this)

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075915

Several options:

Minimal fix

You've used "this" within the selector; what you want to do is use $(this) to get a jQuery object for the actual tile the mouse moved over, and then use find to find the descendant elements. You're also better off using mouseenter and mouseleave than mouseover and mouseout:

$(function () {
    $(".tileAgenzia").bind("mouseenter", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseleave", function () {
        $(this).find(".ui-icon").hide();
    });
});

(The reason you're better off is that mouseover and mouseout bubble, and so as the mouse travels over descendant elements of the "tileAgenzia" elements, you'll see messages from those descendants.)

Use CSS (if you can)

But it's worth noting that unless you have to support IE6 and IE7 (and some people do), you can do this purely with CSS, no JavaScript required:

.tileAgenzia .ui-icon {
    display: none;
}
.tileAgenzia:hover .ui-icon {
    display: inline;
}

When the mouse is hovering anywhere over an element with the class "tileAgenzia", its descendant elements with the class "ui-icon" will be visible; when the mouse isn't hovering over it, they won't.

More concise jQuery

If you want to stick with the JavaScript solution, you can use the hover function, which is (if you pass it two functions) just a shortcut for hooking up mouseenter and mouseleave:

$(function () {
    $(".tileAgenzia").hover(
        // Called on mouseenter
        function () {
            $(this).find(".ui-icon").show();
        },
        // Called on mouseleave
        function () {
            $(this).find(".ui-icon").hide();
        }
    );
});

Upvotes: 4

Nix
Nix

Reputation: 6028

Ah, "this" shouldn't be inside the apostrophes. If you have jQuery loaded, I would do it the jQuery way:

$(".tile").hover(function(){
  $(this).children(".ui-icon").show();
}, function(){
  $(this).children(".ui-icon").hide();
});

Upvotes: 1

John Fisher
John Fisher

Reputation: 22727

I believe you wan to change:

$("this .ui-icon")

to

$(this).find(".ui-icon")

Upvotes: 2

Evan
Evan

Reputation: 6115

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
         $(this).find(".ui-icon").show();
    });
});

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114447

I think you may mean this:

$(this).find(".ui-icon")

Upvotes: 2

Dennis
Dennis

Reputation: 32608

this in a string is not the same as the variable this. Wrap it in jQuery and use find.

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
        $(this).find(".ui-icon").hide();
    });
});

Upvotes: 1

jfriend00
jfriend00

Reputation: 708206

There are several ways to scope a jQuery select to the current subtree. This is one using the .find() method.

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
        $(this).find(".ui-icon").hide();
    });
});

I might suggest this as a simpler alternative:

$(function () {
    $(".tileAgenzia").hover(function () {
        $(this).find(".ui-icon").toggle();
    });
});

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33885

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
        $(this).find(".ui-icon").hide();
    });
});

Upvotes: 0

user862010
user862010

Reputation:

Try: $( this ).find ( '.ui icon' ).show()

Upvotes: 2

Related Questions