时间戳

首页 > 解决方案 > 使用jQuery查找某些文本，如果存在，则将元素附加到附近的某个元素

jquery - 使用jQuery查找某些文本，如果存在，则将元素附加到附近的某个元素

问题描述

我正在尝试让 jQuery 检测文章中的某个文本，例如“add-canvas-snow”，如果找到它，则仅在同一篇文章中，而不是列出的所有文章中附加<canvas class="add-canvas-snow" />到, 。a.featured-image-link

我尝试使用 jQuery.closest('.featured-image-link')方法，但它似乎不起作用。没有 Chrome 控制台错误。

我怎样才能让它工作？

也是.closest()这样做的最佳方法，或者我应该将文章 ID 用作变量。还是我应该使用该.sibling('featured-image-link')方法？从性能的角度来看，哪个更好？

HTML：

<article class="article" id="article-0">
  <div class="post-header">
    <a class="featured-image-link" href="#"></a>
    <div class="post-category-label">
      <span>example-1</span>
      <span>example-2</span>
    </div>
  </div>
  <div class="post-body">
    content
  </div>
  <div class="post-footer">
    content
  </div>
</article>
<article class="article" id="article-1">
  <div class="post-header">
    <a class="featured-image-link" href="#"></a>
    <div class="post-category-label">
      <span>example-3</span>
      <span>add-canvas-snow</span>
      <span>example-4</span>
    </div>
  </div>
  <div class="post-body">
    content
  </div>
  <div class="post-footer">
    content
  </div>
</article>
<article class="article" id="article-2">
  <div class="post-header">
    <a class="featured-image-link" href="#"></a>
    <div class="post-category-label">
      <span>example-5</span>
      <span>example-6</span>
    </div>
  </div>
  <div class="post-body">
    content
  </div>
  <div class="post-footer">
    content
  </div>
</article>

查询：

$('#main-content #Blog1 article').each(function() {
  if ($('#main-content #Blog1 article .post-header .post-category-label:contains("add-canvas-snow")').length > 0) {
    $(this).closest('.featured-image-link').append('<canvas class="add-canvas-snow" />');
  }
});

仅供参考：包含“add-canvas-snow”的文章是动态的，以及将出现在页面上的文章数量。

编辑：我也试过：

$('#main-content #Blog1 article').each(function() {
  if ($('#main-content #Blog1 article .post-header .post-category-label > span:contains("add-canvas-snow")').length > 0) {
    $(this).parent().siblings('.featured-image-link').append('<canvas class="add-canvas-snow" />');
  }
});

标签： jquery

解决方案

$(this)您的函数each()中的 the 不是指<span>包含的add-canvas-snow，而是指<article>. 因此closest()andprev().siblings()将不起作用，而是您必须使用find('.featured-image-link'). 请注意，我还将函数#main-content #Blog1 article内部的选择器替换为，因为在函数内部，当前元素已经是您要在其中搜索的元素。each()$(this).find()each()<article>add-canvas-snow

$('#main-content #Blog1 article').each(function() {
  if ($(this).find('.post-header .post-category-label:contains("add-canvas-snow")').length > 0) {
    $(this).find('.featured-image-link').append('<canvas class="add-canvas-snow" />');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-content">
  <div id="Blog1">

    <article class="article" id="article-0">
      <div class="post-header">
        <a class="featured-image-link" href="#"></a>
        <div class="post-category-label">
          <span>example-1</span>
          <span>example-2</span>
        </div>
      </div>
      <div class="post-body">
        content
      </div>
      <div class="post-footer">
        content
      </div>
    </article>
    <article class="article" id="article-1">
      <div class="post-header">
        <a class="featured-image-link" href="#"></a>
        <div class="post-category-label">
          <span>example-3</span>
          <span>add-canvas-snow</span>
          <span>example-4</span>
        </div>
      </div>
      <div class="post-body">
        content
      </div>
      <div class="post-footer">
        content
      </div>
    </article>
    <article class="article" id="article-2">
      <div class="post-header">
        <a class="featured-image-link" href="#"></a>
        <div class="post-category-label">
          <span>example-5</span>
          <span>example-6</span>
        </div>
      </div>
      <div class="post-body">
        content
      </div>
      <div class="post-footer">
        content
      </div>
    </article>

  </div>
</div>

推荐阅读