CODEWITHSUNDEEP
jquerycss
user5075489
user5075489

Reputation:

Select last element of class

I'm trying to make an article page where the article is partially visible.

At the moment my code looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="article col col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div class="articleTitle">Your Karate "Blocks" Are Dysfunctional. Here's Why.</div>
  <div class="articleAuthor">
    <p><a href="http://www.karatebyjesse.com/karate-block-real-meaning/" target="_blank">Jesse Ankamp</a>
    </p>
  </div>
  <article class="preview">
    <p class="italic bold">

      “Traditional Karate blocks don’t work against real attacks.”
    </p>
    <p>That’s something I often hear.</p>
    <p class="italic">

      (Especially from people who don’t practice Karate.)
    </p>
    <p>They claim our Karate blocks require too much strength, power, speed, intuition and effort to successfully work against an opponent attacking full force.</p>
    <p>I agree.</p>
  </article>
  <article class="full">
    <p>Some more text</p>
  </article><a class="seeMore btn btn-primary">See More...</a>
  <hr>
</div>

I'd like to click on the see more button and have jQuery select the previous .full class. I'm just not advanced enough in selectors to know how.

Upvotes: 1

Views: 190

Answers (5)

Wesley Smith
Wesley Smith

Reputation: 19571

You're probably looking for something along the lines of this:

$(".seeMore").click(function(){
   $this = $(this);
   $this.prev().toggle();
   $this.text( $this.prev().is(':visible') ? 'See Less...' : 'See More...')
});
.full{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article col col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div class="articleTitle">Your Karate "Blocks" Are Dysfunctional. Here's Why.</div>
  <div class="articleAuthor">
    <p><a href="http://www.karatebyjesse.com/karate-block-real-meaning/" target="_blank">Jesse Ankamp</a>
    </p>
  </div>
  <article class="preview">
    <p class="italic bold">

      “Traditional Karate blocks don’t work against real attacks.”
    </p>
    <p>That’s something I often hear.</p>
    <p class="italic">

      (Especially from people who don’t practice Karate.)
    </p>
    <p>They claim our Karate blocks require too much strength, power, speed, intuition and effort to successfully work against an opponent attacking full force.</p>
    <p>I agree.</p>
  </article>
  <article class="full">
    <p>Some more text</p>
  </article><a class="seeMore btn btn-primary">See More...</a>
  <hr>
</div>

If your content is loaded dynamically, you'll need a slight tweak:

$(document).on("click", ".seeMore", function(){
   var $this = $(this);
   $this.prev().toggle();
   $this.text( $this.prev().is(':visible') ? 'See Less...' : 'See More...')
});

If your HTML layout changes, but you will always have one "see more" button with each "full" element, this approach would work better:

$(document).on("click", ".seeMore", function(){
   var $this = $(this);
   var cur = $('.seeMore').index($this);
   $('.full').eq(cur).toggle();
   $this.text( $('.full').eq(cur).is(':visible') ? 'See Less...' : 'See More...')
});

Upvotes: 1

guradio
guradio

Reputation: 15565

The :last selector selects the last element.

Note: This selector can only select one single element. Use the :last-child selector to select more than one element (one for each parent).

$('.classname:last')

Upvotes: 0

Varun
Varun

Reputation: 911

To select the last element having class full ,

$('.full').last();

Upvotes: 2

suyesh
suyesh

Reputation: 659

$(document).ready(function(){
    $('.seeMore').on('click', function(){
        var fullClass = $(this).prev().html();
        alert(fullClass);
    });

});

I guess this may help you.

http://jsfiddle.net/nbq7prcr/

Upvotes: 1

jameshwart lopez
jameshwart lopez

Reputation: 3161

Maybe this is what you need.

$(".seeMore").click(function(){
   alert("See more has been clicked");
   console.log($(this).prev('.full'));
});

Upvotes: 2

Related Questions