jquery - .get() で親を取得したら、セレクターで要素を取得する方法

Question

を使用してvar slide=($('#accommodation-flexslider li').get(currentSlide));います。これにより、次のhtmlが取得されます。

<li>
    <article>
        <img src="http://localhost/...">
        <div class="flex-caption">
       <h1 class="caption-heading">Patio </h1>
              <p class="caption-description">Enclosed patio...</p>
        </div>
    </article>
</li>

my のテキストを取得して使用caption-headingするための jQuery は何ですか?caption-descriptionvar slide

これらのクラスは 12 個以上あるので、変数を使用して取得したクラスだけが必要です。currentSlide

Answer 1

を使用しているため.get()、slide var は jQuery オブジェクトではなく DOM 要素になります。.find()したがって、他の回答が示唆するように、直接呼び出すことはできません。ただし、コンテキスト付きの jQuery セレクター構文は機能します。

var caption-heading = $("h1.caption-heading", slide).text();

または、(詳細.eq())の代わりに使用して、スライドを jQuery オブジェクトにすることもできます。.get()

var slide = $('#accommodation-flexslider li').eq(currentSlide);
var caption-heading = slide.find("h1.caption-heading").text();

Answer 2

テキストを取得するためにJquery .text()を使用できます

$('caption-heading').text()

特定の要素を見つけるには、Jquery find()を使用できます

slide.find("h1.caption-heading").text();

Answer 3

スライド変数の使用:

(slide が jQuery オブジェクトではなく DOM 要素である場合は、$(slide).find()...代わりに行う必要があることに注意してください)

var caption-heading = slide.find("h1.caption-heading").text();
var caption-description = slide.find("p.caption-description").text();

または、コメントで言及されている @tcovo のように、コンテキストセレクターを使用して実行できます。

var caption-heading = $("h1.caption-heading", slide).text();
var caption-description = $("p.caption-description", slide).text();

スライド要素に複数のキャプションがある場合、.eq()関数を使用して必要なキャプションを取得できます。3 つのh1.caption -heading 要素があるとします。次のようにして 2 番目の要素を取得できます。

var caption-description = slide.find("h1.caption-heading").eq(1).text();

Answer 4

を使用するだけfindです：

slide.find('caption-heading').text()