jquery, how to affect only the clicked element?

Question

i have this setup:

<div class="video" id="video_main">
        <div class="video_image_bg video_logo_off" id="video_bg">
            <span class="video_span" id="video_span"></span>
        </div>
<div>
<div class="video" id="video_main">
        <div class="video_image_bg video_logo_off" id="video_bg">
            <span class="video_span" id="video_span"></span>
        </div>
<div>
....
....

and:

var videospan = $('.video').find('#video_span');

$('.video').mouseenter(function() {
    videospan.fadeTo("slow", 1);
});
$('.video').mouseleave(function() {
    videospan.fadeTo("slow", 0);
});

one problem is that when i mouse enter all divs get affected, and not the one that i actually entered with the mouse.

im not sure what $(this) means here

and the second problem is that i want to use hover or hoverIntent method better than mouseenter and mouseleave, but im not sure how to use fadeTo to get the same effect.

any ideas?

Thanks

Answer 1

I tried to use class based solution, Also you have duplicate ID in same document. ID's must be unique in the same document.

var videospan = $('.video');

videospan.hover(
function() {
    $(this).find('.video_span').fadeTo("slow", 1);
},
function() {
    $(this).find('.video_span').fadeTo("slow", 1);
});

Try above and let me know how it goes.

Answer 2

use this inside the event to know who raised the event.

$('.video').mouseenter(function() {
    $(this).find('.video_span').fadeTo("slow", 1);
});
$('.video').mouseleave(function() {
    $(this).find('.video_span').fadeTo("slow", 0);
});

Note that you have multiple elements with the same video_span and video_main ids. id must be unique!

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

From the jquery docs.

each page is a country and each id is... id, you can't have several people with the same id in the same country.

Answer 3

Issue #1: You have the same ID set for multiple elements. ID's should be unique to the element you are setting it for. You should use classes for this.

Issue #2: var videospan = $('.video').find('#video_span'); tells it to find element with ID of video_span under ALL elements with the video class.

Here is the correct way to use your code:

<div class="video video_main">
        <div class="video_image_bg video_logo_off video_bg">
            <span class="video_span"></span>
        </div>
<div>
<div class="video video_main">
        <div class="video_image_bg video_logo_off video_bg">
            <span class="video_span"></span>
        </div>
<div>

.

$('.video').mouseenter(function() {
    var videospan = $(this).find('.video_span');
    videospan.fadeTo("slow", 1);
});
$('.video').mouseleave(function() {
    var videospan = $(this).find('.video_span');
    videospan.fadeTo("slow", 0);
});

When an event is called to jQuery, the context of this becomes the HTMLDOMElemnent of the element with the event being triggered. So inside an event, things likes this.style.display, this.appendChild(), etc will work. However this is not a jQuery object, so we enable jQuery chaining and functions using $(this), since jQuery can accept a HTMLDOMElement.

Please vote if you learned something new and accept if this answers your.