Question

在一个页面上，我有很多DIV与一个类＆＃39;结果块＆＃39;。（数十个）

在每个结果块DIV中，有一个元素，它包含一个已经设置了title属性的link元素 - 在下面的例子中，有两个结果块DIV，一个对于公司A＆＃39;和另一个公司B＆＃39;。

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

我的问题 - 如何首先向页脚中的每个链接元素添加data-id属性，然后使用JQ抓取页面并指定设置为链接的title属性（包含在壁橱兄弟标题中）到页脚内的每个链接（ul列表）。因此，对于公司A，每个链接元素将获得公司A＆＃39;的数据ID，而对于公司B，每个链接元素将获得＆＃39;公司的数据ID B＆＃39;

我尝试了一些东西，但似乎没有任何工作 - .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

你很接近，但你的方法存在两个主要问题

您没有循环实例。可以通过使用attr(attrName, function)来解决这个问题，find()将为每个匹配元素运行该函数
nearest（）仅适用于一个方向。你不能在同一个css遍历中查找然后向下。而是使用nearest（）查找，然后使用$(".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>

AmazonSimpleSystemsManagementClient client = new AmazonSimpleSystemsManagementClient();
var param = client.GetParameter(new GetParameterRequest { Name = "foo", WithDecryption = true });

Answer 2

循环结果块，获取所需的标题，并将它们放在属于结果块的页脚链接上。你不会看到＆＃39; data-id＆＃39;如果检查元素，因为jquery将数据字段存储在内存中，但如果你控制台记录它们的数据变量，你会看到它们存在。

＆＃13;

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

＆＃13;

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

＆＃13;

将兄弟的元素标题属性克隆为data-id

2 个答案: