一旦通过.get（）检索父级，如何通过选择器获取元素答案

【问题标题】：How to I get an element by selector once retrieved parent by .get()一旦通过.get（）检索父级，如何通过选择器获取元素
【发布时间】：2023-04-08 16:14:01
【问题描述】：

我正在使用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>

然后使用我的var slide 获取caption-heading 和caption-description 的文本的jQuery 是什么？

我有超过 12 个这样的类，所以我只需要使用我的变量 currentSlide 检索到的一个

【问题讨论】：

标签： jquery flexslider

【解决方案1】：

使用幻灯片变量：

（请注意，如果 slide 是 DOM 元素而不是 jQuery 对象，则必须改为 $(slide).find()...）

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

或者像 cmets 中提到的 @tcovo 一样，您可以使用上下文选择器来做到这一点：

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

如果幻灯片元素有多个标题，您可以使用 .eq() 函数来检索您想要的。假设它有 3 个 h1.caption-heading 元素，您可以执行以下操作来获取第二个：

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

【讨论】：

另一种语法是带有上下文的 jQuery 选择器：$("h1.caption-heading", slide).text();。使用这种形式，slide 不必是 jQuery 对象，它可以是 DOM 元素。
.find 不起作用，我想就像上面有人说的那样，它是一个 dom 元素而不是 jquery 对象
@Nicola 我把它放在另一个答案中，解释了为什么 find 不起作用。
@Nicola 用 $(slider).find() 替换 slider.find() 使 find 工作

【解决方案2】：

因为您使用的是.get()，所以幻灯片变量将是一个 DOM 元素，而不是一个 jQuery 对象。所以你不能像其他答案建议的那样直接打电话给.find()。但是 jQuery selector-with-context 语法会起作用：

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

或者，您可以使用 .eq() 代替 .get() (learn more)，以便幻灯片是一个 jQuery 对象：

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

【讨论】：

【解决方案3】：

您可以使用Jquery .text() 获取文本

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

要查找特定元素，您可以使用Jquery find()

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

【讨论】：

【解决方案4】：

只需使用find：

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

【讨论】：