按顺序从图像中返回数据

Question

我对我的（基本）javascript 非常生疏，所以希望我没有完全误解这个问题，但基本上我想要做的是将图像的“alt”字段作为附加到标题的标题返回每个图像的标题，虽然我基本上是这样，但它会将整个图像序列的列表返回给每个图像，而不是它们自己的序列。代码非常简单，这可能就是它不起作用的原因。任何帮助表示赞赏

$('#projectThumbs img').each(function(){
  $('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
    });

例如，如果图像的标题序列为“1”、“2”、“3”，则每个图像现在都将附加“1,2,3”而不是“1”到 1、“2” ' 到 2 等。

来自 html 的图像结构（在 Squarespace 中，因此我无法访问源代码，只能进行注入）。这是在图像网格中。

ETA：注意到代码中有一些隐藏的 div，也许 project-item-count 在某些方面有用？

<a class='project'>
    <div>
        <div class='project-image'>
            <div class='intrinsic'>
              <div class = 'content-fill'>
                 <img alt='example'>
              </div>
            </div>
          <div class='project-item-count'>
          </div>
        </div>
        <div class='project-title'>
            Title
        </div>
    </div>
</a>

image of what's happening to help clarify

Answer 1

$('.project-image img').each(function(){
  $(this).parents('.project-image').next().append("<div>" + $(this).attr('alt') + "</div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='project'>
    <div>
        <div class='project-image'>
            <div class='intrinsic'>
              <div class = 'content-fill'>
                 <img src="https://picsum.photos/200" alt='example1'>
              </div>
            </div>
          <div class='project-item-count'>
          </div>
        </div>
        <div class='project-title'>
            Title
        </div>
    </div>
</a>
<a class='project'>
    <div>
        <div class='project-image'>
            <div class='intrinsic'>
              <div class = 'content-fill'>
                 <img src="https://picsum.photos/200" alt='example2'>
              </div>
            </div>
          <div class='project-item-count'>
          </div>
        </div>
        <div class='project-title'>
            Title
        </div>
    </div>
</a>

Answer 2

假设 HTML 包含有效的 #projectThumbs 元素，问题是您没有正确定位 .project-title 元素。

您需要使用parent()（查找元素的父元素）来执行此操作，然后使用siblings() 查找正确的兄弟（已分配project-title 类）。

请看下面的演示：

$('#projectThumbs img').each(function() {
  $(this).parent().siblings('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectThumbs">
  <a class='project'>
    <div>
      <div class='project-image'>
        <img alt='example'>
      </div>
      <div class='project-title'>
        Title
      </div>
    </div>
  </a>
</div>

Answer 3

id 属性不能在 DOM 元素中重复，因此如果您使用具有相同名称的 class 属性并使用每个函数，则每个函数不会在所有相同的 id 元素上运行，那么您的问题就解决了。我希望它对您有所帮助。

$('#projectThumbs img').each(function(){
  $('.project-title').append("<p>" + $(this).attr('alt') + "</p>");
    });

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
   <div id="projectThumbs">
    <img alt="myimae" 
src="http://psdandcode.com/themes/psd2code/images/logo.png">
    <img alt="mimage" 
 src="http://psdandcode.com/themes/psd2code/images/logo.png">
    <img alt="myimae" 
  src="http://psdandcode.com/themes/psd2code/images/logo.png">
    <img alt="myimag" 
 src="http://psdandcode.com/themes/psd2code/images/logo.png">

</div>
<div class="project-title"></div>