jquery wont set image src from another image

Question

I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.

Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.

HTML:

$('.blog-post-image').each(function() {
  var $me = $(this);
  var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');

  $me.attr('src', blogPostImage);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
  <div class="blog-header">
    <div class="blog-post-container">
      <h2 class="blog-title">
      </h2>
      <p class="blog-date">
        <span class="date-text">
        15/6/2021
        </span>
      </p>
      <div>

        <img class="blog-post-image" />

      </div>
    </div>
  </div>
  <div class="blog-content">
    <div>
      <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
        <a>
          <img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
        </a>
        <div style="display:block;font-size:90%">
        </div>
      </div>
    </div>

`.blog-content` isn't a sibling of `.blog-post-image`. – Barmar Jun 18 '21 at 01:05 — Barmar, Jun 18 '21 at 01:05

Barmar · Answer 1 · 2021-06-18T01:17:28.567

2

.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.

You need to go up to the .blog-header to get its sibling.

Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.

$('.blog-post-image').attr('src', function() {
  return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
  <div class="blog-header">
    <div class="blog-post-container">
      <h2 class="blog-title">
      </h2>
      <p class="blog-date">
        <span class="date-text">
        15/6/2021
        </span>
      </p>
      <div>

        <img class="blog-post-image" />

      </div>
    </div>
  </div>
  <div class="blog-content">
    <div>
      <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
        <a>
          <img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
        </a>
        <div style="display:block;font-size:90%">
        </div>
      </div>
    </div>

edited Jun 18 '21 at 01:17

answered Jun 18 '21 at 01:12

Barmar

741,623
53
500
612

Your solution is better than mine :) – Dan Mullin Jun 18 '21 at 01:12
Except I didn't fix `.children()`. – Barmar Jun 18 '21 at 01:14
No biggy. Good solution. You need to change that to find. It's missing the top header image. – Dan Mullin Jun 18 '21 at 01:14
Just tried your and solution below. Here is the [Blog](https://www.paget96projects.com/blog) link so check it, maybe is there something else that I have missed. – Danijel Markov Jun 18 '21 at 01:31
Seems that even ```$('.blog-post-image').attr('src', "https://www.paget96projects.com/uploads/7/7/9/0/77909082/editor/p96-1-3.jpg?1623063371");``` Wont work – Danijel Markov Jun 18 '21 at 01:40
Both working, I have solve the issue. Header was a problem. Thanks for the time guys – Danijel Markov Jun 18 '21 at 13:47

Dan Mullin · Accepted Answer · 2021-06-18T02:14:31.043

Two things:

1.) .blog-content is not a sibling of .blog-post-image

2.) .children() only looks one level deep to find the element you are looking for.

What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.

$('.blog-post-image').each(function() {
  var me = $(this);
  var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
  me.attr('src', blogPostImage);
});

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="blog-post-746510653886732592" class="blog-post">
    <div class="blog-header">
      <div class="blog-post-container">
        <h2 class="blog-title">
        </h2>
        <p class="blog-date">
          <span class="date-text">15/6/2021</span>
        </p>
        <div>
          <img class="blog-post-image" />
        </div>
      </div>
    </div>
    <div class="blog-content">
      <div>
        <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
          <a>
            <img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
          </a>
          <div style="display:block;font-size:90%">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Thanks for your time, same as in above answer comments, I am not able to make it works. This weebly is complete nightmare. — Danijel Markov, Jun 18 '21 at 01:44
@DanijelMarkov what issue is it giving you? Do you get any console errors? — Dan Mullin, Jun 18 '21 at 02:13

jquery wont set image src from another image

2 Answers2