javascript - 使用 jQuery Clone 选择要复制的元素

Question

我有一本指南，其中每一章都位于 UL 的单独 LI 中。我正在尝试使用 jQuery Clone 函数来搜索包含所有这些“章节”LI 的父 UL，并返回包含特定文本的那些章节。

现在，我得到了奇怪的结果，可能是因为它复制了最小子元素的元素，而不仅仅是整个 div。

此外，每个章节 LI 只能返回一次。

• makeIntoSldieshowUL - 包含所有“章节”的 UL
• slideShowSlide - 每个“章节”的类名称
• searchResultsArea - 在其中附加包含文本的“章节”的 Div

到目前为止我已经:

$("#makeIntoSlideshowUL").find(".slideShowSlide:contains('" + $(this).val() + "')").clone().appendTo("#searchResultsArea");

为了让您了解我要克隆的内容，这里有一个简短的示例

<ul id="makeIntoSlideshowUL">
<li  class="slideShowSlide" id="0">
    <div class="topicTitle">Cardholder responsibilities</div>
    <p>Cardholders are responsible for ensuring proper use of the card. If your division or department has approved you for a Pro-Card, you must use the card responsibly in accordance with the following requirements:</p>
    <ul>
        <li>Purchase items for UCSC business use only</li>
        <li>Never lend or share your Pro-Card</li>
        <li>Purchase only allowable goods and services</li>
    </ul>
</li>
<li class="slideShowSlide" id="1">
    <div class="topicTitle"><strong>Restricted and Unallowable Pro-Card Purchases</strong></div>
    <p>Some types of purchases are restricted are not allowed with the Pro-Card.  Disputes with suppliers are initially handled by the Cardholder if, for example, they don't recognize a transaction on their statement, or the amount doesn't match their receipt. The Cardholder is responsible for contacting the supplier immediately to try to resolve the matter.</p>
</li>

Answer 1

使用jQuery's .children() method而不是.find()因为它听起来像 .slideShowSlide元素是直接子元素。

$("#makeIntoSlideshowUL").children(".slideShowSlide:contains('" + $(this).val() + "')").clone().appendTo("#searchResultsArea");

或者您可以使用the > child selector相反。

$("#makeIntoSlideshowUL > .slideShowSlide:contains('" + $(this).val() + "')").clone().appendTo("#searchResultsArea");

<小时/>

编辑: 在某一时刻，您似乎将章节称为 div。如果他们是 <li> 的 child 元素，您可能需要类似以下内容:

$("#makeIntoSlideshowUL > li > .slideShowSlide:contains('"...