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

问题描述

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

需要关心的东西很少，我应该使用每个，因为博客文章很多，而且由于相同的原因我不能使用 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>

解决方法

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

您需要前往 .blog-header 才能找到它的兄弟。

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

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

两件事：

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>

html jquery web web weebly

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

问题描述

解决方法

相关问答