Выберите последний элемент класса

Question

Я пытаюсь создать страницу статьи, где статья частично видна.

На данный момент мой код выглядит следующим образом:

<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>

Я хотел нажать на кнопку увидеть более и JQuery выбрать предыдущий класс .Full. Я просто недостаточно продвинулся в селекторах, чтобы знать, как это сделать.

Answer 1

Вы, вероятно, ищете что-то вдоль линий этого:

$(".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>

---

Если содержимое загружается динамически, вам необходимо небольшое tweak:

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

---

Если ваши изменения макета HTML, но вы всегда будете иметь одну кнопку «больше» видеть с каждым «полный» элемент, такой подход будет работать лучше:

$(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...') 
}); 

Answer 2

Возможно, это то, что вам нужно.

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

Answer 3

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

}); 

Я предполагаю, что это может помочь вам.

http://jsfiddle.net/nbq7prcr/

Answer 4

Чтобы выбрать последний элемент, имеющий класс полный,

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

Answer 5

: последний раз селектор выбирает последний элемент.

Примечание: Этот селектор может выбирать только один элемент. Используйте селектор last-child для выбора более одного элемента (по одному для каждого родителя).

$('.classname:last')