Reputation: 2583
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
Reputation: 10763
To limit your selector to a parent element, use either:
$(this).find(".ui-icon")
Or:
$('.ui-icon', this)
Upvotes: 1
Reputation: 1075915
Several options:
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.)
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.
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
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
Reputation: 22727
I believe you wan to change:
$("this .ui-icon")
to
$(this).find(".ui-icon")
Upvotes: 2
Reputation: 6115
$(function () {
$(".tileAgenzia").bind("mouseover", function () {
$(this).find(".ui-icon").show();
});
$(".tileAgenzia").bind("mouseout", function () {
$(this).find(".ui-icon").show();
});
});
Upvotes: 0
Reputation: 114447
I think you may mean this:
$(this).find(".ui-icon")
Upvotes: 2
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
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
Reputation: 33885
$(function () {
$(".tileAgenzia").bind("mouseover", function () {
$(this).find(".ui-icon").show();
});
$(".tileAgenzia").bind("mouseout", function () {
$(this).find(".ui-icon").hide();
});
});
Upvotes: 0