Jquery function on specific divs

Question

OK, I have seen this question before, however none of the provided solutions worked for me, so I decided to start a new thread. I have some multiple results shown in HTML, and I want to use a jQuery function to each one of them separately. Unfortunately, the effects apply to all of the divs, as I expected. Some code below:

<div class="block_result">


<div class="details">
    <div class="info">
        {$$Title} {$$points} {$$rates}
    </div>

    <div class="navbar">
        <div class='btn1'><a href="#d" class="fadingTab active" value="Tab1"><img src="some_png.png" alt=""></a></div>
        <div class='btn2'><a href="#f" class="fadingTab" value="Tab2"><img src="some_png.png" alt=""></a></div>
        <div class='btn3'><a href="#r" class="fadingTab" value="Tab3"><img src="some_png.png" alt=""></a></div>
    </div>


    <div class="contentContainer">

        <div id="Tab1" class="contentWrapper">

                <p class="contentText Tab1">some info</p>

            </div>

            <div id="Tab2" class="contentWrapper" >

                <p class="contentText Tab2">some other info</p>

            </div>

            <div id="Tab3" class="contentWrapper" >

                <p class="contentText Tab3">some other other info</p>

            </div>
    </div>

</div>

<div style="clear:both;"></div>

</div>

The same HTML format is applied to each one of the results. Here is the jQuery code, and the function I want to use. I want to change the content of each result according to the tab that is selected.

// On page load
$(document).ready(function(){

    //When a tab link is clicked
    $("a.fadingTab").click(function() {    

        // remove the active class from all classes
        $(".active").removeClass("active");

        // add the active class to this tab
        $(this).addClass("active");


        // fade element with the class 'contentText' out
        $(this).find(".contentText").fadeOut(700);


        // wait for fadeout then hide element with class 'contentWrapper'
        setTimeout(function(){ $(".contentWrapper").hide(); }, 700); 


        // find 'value' attribute value and show and fade elements
        var content_show = $(this).attr("value");
        setTimeout(function(){ $("#"+content_show).show(); }, 700);
        setTimeout(function(){ $("."+content_show).hide().fadeIn(700); }, 700);                   
    });
});

Every time I press one tab button all the result divs are changing. Any ideas?

Answer 1

 $this.find(".contentText").fadeOut(700);

won't work

your anchor does not have the class="contentText" as its children

Replace it with

$(".contentText").not( $this.attr('value')  ).fadeOut(700);

this should do

$("a.fadingTab").click(function () {
        var $this = $(this);
        // remove the active class from all classes
        $(".active").removeClass("active");
        // add the active class to this tab
        $this.addClass("active");
        var content_show = $this.attr("value");
        // fade element with the class 'contentText' out
        $(".contentText").show();
        $(".contentText").not($('.' + content_show)).fadeOut(700);
    });

Check Fifddle

Answer 2

First, You better use .delay() instead of timeout

So

 setTimeout(function(){ $(".contentWrapper").hide(); }, 700);     

Whould be

 $(".contentWrapper").delay(700).fadeOut();

Second, as pXL mentioned, you are using selectors wrong way. Use combination of closest , find and filter to navigate from one selector to another.