CODEWITHSUNDEEP
javascriptjqueryhtmlcss
This Guy
This Guy

Reputation: 1726

Perform actions/functions to one class rather than to all classes that have same name

PLEASE NOTE: This question has been moved over to here: Load More / Show Less issues using jquery and has been answered. Thank you to all who helped out! I wish there was a way to mark an answer as correct if two answers are correct (like a part-correct answer) since this initially was a two part question. Again, much appreciated for the help as well as in understanding what worked once we found the answer!

Several issues have been addressed and fixed already but am now running into a few other issues...Please see link above. I want to thank everyone for their help thus far!

I'm not entirely sure how to phrase this, but I'll do my best. First and foremost, I've spent roughly 5 hours trying to get this to work; trying tons of different ways that were suggested (or provided) to other questions that were somewhat similar here on stackoverflow as well as searched google like a mad man...but nothing seemed to work.

Question: How can I perform actions/calls/functions to only one class rather than to all classes that have the same class name?

This question may seem easy to answer, but with the setup I have, it may actually be quite frustrating (or at the very least, it is for me)...please keep in mind, I am relatively new still to javascript and jquery...

Here is what I have - Please note, the jQuery/JS and HTML provided below is a very simplified version...

As it sits right now, things work the way I would like them too, the only issue I'm encountering is how to "select" only one class to perform the stuff needed below rather than applying it all to all classes with the same class names...

jQuery/JS:

size_item = $(".container_item").size();
x=4;
$('.container_item:lt('+x+')').show();
$('.view_more').click(function (e) {
    e.preventDefault();
    x= (x+4 <= size_item) ? x+4 : size_item;
    $('.container_item:lt('+x+')').slideDown();
    $('.show_less').fadeIn('slow');
    if(x == size_item) {
        $('.view_more').fadeOut('slow');
    }
});
$('.show_less').click(function (e) {
    e.preventDefault();
    x=(x-4<4) ? 4 : x-4;
    $('.container_item').not(':lt('+x+')').slideUp();
    $('.view_more').fadeIn('slow');
    if(x == 4) {
        $('.show_less').fadeOut('slow');
    }
});

HTML:

<div class="wrapper">
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
    <div class="container">
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="container_item">
            <!-- Content -->
        </div>
        <div class="view_more">
            <a href="#">Load More</a>
        </div>
        <div class="show_less">
            <a href="#">Show Less</a>
        </div>
    </div>
</div>

Here is a jsFiddle for demonstration purposes.

Any help on this is greatly appreciated.

UPDATED: To match fiddle. I'm still having some issues though. Now, the 'Load More' button won't fade away like it did before and the other classes I have doesn't display anything until I click on the 'Load More' link - it should show 4 items in each to begin with like it is doing for this first one. Any ideas?

size_item = $(".resume_container_item").size();
x=4;
$('.resume_container_item:lt('+x+')').show();
    $('.resume_view_more').click(function (e) {
        e.preventDefault();
        var $parent = $(this).parent();
        x= (x+4 <= size_item) ? x+4 : size_item;
        $parent.find('.resume_container_item:lt('+x+')').slideDown();
        $('.resume_show_less').fadeIn('slow');
        if(x == size_item) {
            $('.resume_view_more').fadeOut('slow');
        }
    });
    $('.resume_show_less').click(function (e) {
        e.preventDefault();
        var $parent = $(this).parent();
        x=(x-4<4) ? 4 : x-4;
        $parent.find('.resume_container_item').not(':lt('+x+')').slideUp();
        $('.resume_view_more').fadeIn('slow');
        if(x == 4) {
            $('.resume_show_less').fadeOut('slow');
        }
    });

UPDATED Fiddle

Upvotes: 0

Views: 107

Answers (1)

alexvance
alexvance

Reputation: 1124

What you want is to search classes within the 'view more' link's parent element: $(this).parent().find('.show-less').

https://jsfiddle.net/456rosg1/

Upvotes: 1

Related Questions