jquery 不会从另一个图像设置图像 src

Question

我已经使用 Weebly 开始了一些博客，现在我想对博客做一些更改 UI，一切都很顺利，直到我想这样做。我想从 blog-content 中的图像获取图像路径并将其设置在 blog-post-image 上。在我看来，这个 jquery 看起来合乎逻辑，但在某处存在错误。

没什么要注意的，我应该用each因为有很多博客post我不能用id因为同样的原因，不能多次使用相同的 ID。

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>

Answer 1

两件事：

1.) .blog-content 不是 .blog-post-image

的兄弟姐妹

2.) .children() 只查找一层深度以找到您要查找的元素。

你需要做的是向上遍历找到.blog-content的兄弟节点，然后使用.find()函数对给定的DOM节点进行深度搜索，找到什么你在找

$('.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>

Answer 2

.blog-post-image 没有任何兄弟姐妹。同级是同一父元素的直接子元素，但 div 中没有包含 <img class="blog-post-image" />.

的其他元素

您需要前往 .blog-header 获取其兄弟。

此外，您可以使用 .attr() 中的函数来代替 .each()。它会自动循环，并将 return 值分配给属性。

$('.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>

jquery 不会从另一个图像设置图像 src

jquery wont set image src from another image

html

jquery

web

weebly