javascript - 将元素标题属性从同级克隆到 data-id

Question

在一个页面上，我有许多带有“结果 block ”类的 DIV。 (几十个)

在每个结果 block DIV 中，都有一个元素包含一个已经设置了标题属性的链接元素 - 在下面的示例中，有两个结果 block DIV，一个用于“Company A”，另一个用于“Company A”对于“B 公司”。

再往下，但仍在每个结果 block DIV 内部，有一个带有多个 a link 元素的 UL - 这些元素目前没有 data-id 属性。 (需要通过JQ添加)

我的问题 - 如何首先向页脚中的每个链接元素添加 data-id 属性，然后使用 JQ 抓取页面并分配设置为链接标题属性的内容(包含在衣柜中)同级页眉)到页脚(ul 列表)内的每个 a 链接。因此，对于 A 公司，每个 a link 元素将获得“Company A”的 data-id，对于 B 公司，每个 a link 元素将获得“Company B”的 data-id。

我尝试了一些方法，但似乎没有任何效果 - .parent 和 .closest 的组合。开始怀疑这在 JQ 中是否可行，或者我是否需要求助于 JS。

<div class="results-block">
  <header>
    <a href="#" class="company-name" title="Company A">Company A</a>
  </header>
  <div class="head-info"></div>
  <footer>
       <ul>
          <li>
             <a href="#" >Add data-id that = 'Company A'</a>
          </li>
          <li>
             <a href="#" >Add data-id that = 'Company A'</a>
          </li>
      </ul>
 </footer>
</div>

<div class="results-block">
  <header>
    <a href="#" class="company-name" title="Company B">Company A</a>
  </header>
  <div class="head-info"></div>
  <footer>
       <ul>
          <li>
             <a href="#" >Add data-id that = 'Company B'</a>
          </li>
          <li>
             <a href="#" >Add data-id that = 'Company B'</a>
          </li>
      </ul>
 </footer>
</div>


$(".results-block footer ul li a").attr("data-id", $(".results-block header a").closest(1).attr("title"));

Answer 1

你已经很接近了，但你的方法有两个主要问题

1. 您没有循环实例。可以通过使用 attr(attrName, function) 来修复此问题，该函数将为每个匹配元素运行该函数
2. closest() 只能在一个方向上起作用。你不能在同一个 css 遍历中向上查找然后向下查找。而是使用closest()查找，然后使用find()改变方向

  $(".results-block footer ul li a").attr("data-id", function(){
       return $(this).closest(".results-block").find("header a").attr("title");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results-block">
      <header>
        <a href="#" class="company-name" title="Company A">Company A</a>
      </header>
      <div class="head-info"></div>
      <footer>
           <ul>
              <li>
                 <a href="#" >Add data-id that = 'Company A'</a>
              </li>
              <li>
                 <a href="#" >Add data-id that = 'Company A'</a>
              </li>
          </ul>
     </footer>
    </div>

    <div class="results-block">
      <header>
        <a href="#" class="company-name" title="Company B">Company A</a>
      </header>
      <div class="head-info"></div>
      <footer>
           <ul>
              <li>
                 <a href="#" >Add data-id that = 'Company B'</a>
              </li>
              <li>
                 <a href="#" >Add data-id that = 'Company B'</a>
              </li>
          </ul>
     </footer>
    </div>