How to access one selector within another in jquery?

Question

I am trying to access the div’s of the '.contentParagraph' class specific to each of the div’s '.content', so that the events of one div do not interfere with the event of the other, follows the code:

http://jsfiddle.net/turiba/tpz1gka3/

If you notice, the paragraph in the first div '.content' appears even if I hover over the other div’s, how do I make it so it doesn’t happen?

Any other remarks in my code will be welcome.

Answer 1

Two things:

First, putting the jQuery code in the Jsfiddle Javascript block is a crime. If you look at the top left corner of the Fiddle, it has an option there to include jQuery automatically ;)

Second: you can search for elements that are descended from another element. Once you have declared the event for all class elements content:

$('.content').mouseenter(function() {
   $(this).animate({
       width: '+=750px',
       opacity: '+=0.65'
   });

   $('.contentParagraph').fadeTo('fast',1);
});

You can replace the instruction in the last row by:

$(this).find('.contentParagraph').fadeTo('fast',1);

The method find finds the descendants of the element in which it is called, who meet the research condition you pass. But this is not efficient. You will make a search every time you fire the event. In your case are few elements and may even be fast, but if someday your HTML swell, it may harm performance.

I can think of a few alternatives you can try:

Create a dictionary of class element ids content for the class elements contentParagraph. Something like:

var contentDictionary: {
    content1: $("#paragraph1"),
    content2: $("#paragraph2"),
    content3: $("#paragraph3")
    /**etc., etc./
}

Then your event would look something like:

$('.content').mouseenter(function() {
    var that = $(this);
    that.animate({
        width: '+=750px',
        opacity: '+=0.65'
    });

   contentDictionary[that.id].fadeTo('fast',1);
});

The second alternative is to give an extra class to the content within the event mouseenter, and take this extra class at the event mouseleave. Hence you apply a different visibility to contentParagraph according to the parent element class.

And there’s one that requires even less effort. Do the contentParagraph be the same size as content. Then use the event mouseenter and mouseleave in the contentParagraph, and not in the content ;) from the contentParagraph, you can get the content unique to it using the function parent jQuery. So:

var content = $(this).parent();

This is much more efficient than the find. Good luck there!

Answer 2

I will give a new answer after having received an accepted answer, because This is possible only with CSS. And the less jQuery the better.

You can use Transitions in CSS, and add:

transition: width .8s, opacity .5s;  // no .content com transições de 0,8 e 0,5 segundos

opacity: 0;
transition: opacity 1s; // no .contentParagraph com uma transição de 1 segundo

And then add new CSS to define how the .content and the . contentParagraph when the .content have a :hover

/* novo CSS */
 .content:hover {
    width: 900px;
    opacity: 0.65;
}
.content:hover .contentParagraph {
    opacity: 1;
}

Demo: http://jsfiddle.net/Sergio_fiddle/qh2hk1wm/

Answer 3

I made an example at Jsfiddle and completed the others div's with text to illustrate.

// troque pela linha abaixo
$('.contentParagraph').fadeTo('fast',0)

// Para ele aplicar o efeito no elemento interno 'p'
$(this).children("p").fadeTo('fast',1)

---

You can also change the following.

In the script, remove:

$('.contentParagraph').hide()

In CSS, apply style:

.contentParagraph{display:none}