CODEWITHSUNDEEP
javascriptjqueryjquery-ui
thomas jaunism
thomas jaunism

Reputation: 815

How to target single instance of a Parent's Sibling's Children with Jquery?

I have a number of dynamically (php) created articles with the same classes. I want to click a button to target the child of parent's sibling. And just that instance of it. My current code is working but it shows/hides the '.descriptionText' div on all articles.

How can I just target the instance of this class that is part of the article that I click?

All code is below but the main line is this: 

$(this).closest(".resultImageContainer")
    .siblings(".descriptionTextContainer")
    .children('.descriptionText')
    .toggle("fold", 100, "linear");

I've tried the adivce in these questions: Here & Here.

MY HTML:

<div class="resultImageContainer">
    <div class="resultImage">
        {!! HTML::image('images/gd.jpg') !!} 
    </div>

    <!-- This is the button below: -->
    <i class="fa fa-plus-square showMoreDetails"></i>
</div>
<div class="daytypeContainer">
    <ul id="dayIcons">
        <li>
            <div class="dayCircle">    
                <span>M</span>
            </div>
        </li>
        <li>
            <div class="dayCircle">
                <span>T</span>
            </div>
        </li>
    </ul>
</div>
<div class="descriptionTextContainer">
    <!-- This 'descriptionText' is the div I want to show/hide. -->
    <div class="descriptionText">
        <p>Cheesecake jujubes topping wafer donut tart sweet fruitcake.Dessert carrot cake sugar plum marzipan chocolate cotton candy marzipan danish. Cake jelly apple pie brownie pie ice cream.</p>
    </div>
    <div class="deetsContainer">
        <div class="otherInfoContainer">
            <ul id="otherInfoIcons">
                <li>
                    <i class="fa fa-phone"></i>
                    <p>022132032</p>
                </li>
                <li>
                    <i class="fa fa-envelope-o"></i>
            </ul>
        </div>
        <div class="addressContainer">
            <p class="streetText">43 Ponsonby Rd</p>
            <p class="cityText">AUCKLAND</p> 
        </div>
    </div>  
</div>

This is the JQUERY I'm using:

$('.showMoreDetails').on('click touch', function(){
    if ($(this).hasClass('fa-plus-square')){
        $(this).removeClass('fa-plus-square');
        $(this).addClass('fa-minus-square');
    } else {      
        $(this).removeClass('fa-minus-square');
        $(this).addClass('fa-plus-square');
    };

    $(this).closest(".resultImageContainer")
        .siblings(".descriptionTextContainer")
        .children('.descriptionText')
        .toggle("fold", 100, "linear");

    $(this).parent(".resultImageContainer").toggleClass("justTitle", 100, "linear");
});

Upvotes: 1

Views: 86

Answers (1)

Nick Sharp
Nick Sharp

Reputation: 1891

This is probably what you are looking for:

$(this).parent()
    .nextAll(".descriptionTextContainer")
    .first()
    .children('.descriptionText')
    .toggle("fold", 100, "linear");

Unless the position of the button is dynamic, at which point you might need the .closest() again. That said, if you have any control over the markup, then there are many ways to make your life easier.

.nextAll().first() isn't the worst thing in the world (http://jsperf.com/jquery-next-loop-vs-nextall-first/2), but its still just dirty because your markup is a bit odd.

Upvotes: 1

Related Questions