CODEWITHSUNDEEP
jquery
Xarcell
Xarcell

Reputation: 2011

Using jQuery to find certain text, and if exists, then append element to certain element nearby

I'm trying to get jQuery to detect a certain text such as "add-canvas-snow" within a article, and if it finds it, append <canvas class="add-canvas-snow" /> to the a.featured-image-link, only within that same article, not all of the articles listed.

I tried using the jQuery .closest('.featured-image-link') method, but it doesn't seem to work. There is no Chrome console error.

How do I get this to work?

Also is .closest() the best method of doing this, or should I be grabbing the article ID as using it as a variable. Or should I be using the .sibling('featured-image-link') method? Which is better from a performance stand-point?

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>

JQUERY:

$('#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" />');
  }
});

FYI: articles that contain "add-canvas-snow" are dynamic, as well as the number of articles that will appear on a page.

EDIT: I also tried:

$('#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" />');
  }
});

Upvotes: 0

Views: 25

Answers (1)

matthias_h
matthias_h

Reputation: 11416

The $(this) in your each() function does not refer to the <span> that contains add-canvas-snow, but to the <article>. Therefore closest() and prev().siblings() won't work, instead you have to use find('.featured-image-link'). Note that I also replaced the selector #main-content #Blog1 article inside the each() function with $(this).find() because inside the each() function the current element is already the <article> in which you want to search for 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>

Upvotes: 1

Related Questions