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

Question

在页面上，我有许多带有“结果块”类的DIV。 （许多）

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

再往下但仍在每个结果块DIV内，有一个带有几个链接元素的UL-当前这些元素没有data-id属性。 （需要通过JQ添加）

我的问题-我如何首先向页脚中的每个链接元素添加data-id属性，然后使用JQ抓取页面并分配设置为链接的title属性的内容（包含在壁橱兄弟标题中）到页脚（ul列表）中每个a链接。 因此，对于公司A，每个链接元素将获得“公司A”的数据ID，对于公司B，每个链接元素将获得“公司B”的数据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. 最近（）只能在一个方向上工作。 您不能在相同的CSS遍历中向上或向下查看。 而是使用close（） find() ，然后使用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> 

Answer 2

循环遍历结果块，获取所需的标题，然后将其放在属于结果块的页脚链接中。 如果您检查元素，则不会看到“ data-id”，因为jquery将数据字段存储在内存中，但是如果您通过控制台日志记录其数据变量，则会看到它们存在。

 $('.results-block').each(function(index, element){ var headerTitle = $(element).find('header a').attr('title'); $('footer a', element).attr('title', headerTitle).data('id', headerTitle); $('footer a', element).each(function(index, element){ console.log(element.title, $(element).data('id')); }); }); 

 <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>