javascript - jQuery 在列表中移动/添加 html 文本不起作用

Question

我想将每个列表项文本(小册子 A、小册子 B 等)从 wpdf_file_name 类移动/添加到 row_downloadbutton > a，然后删除 行文件名

<ul class="wpdf-list-style">
    <li class="clearfix">
        <div class="row_filename">
            <p class="wpdf_file_name">Brochure A</p>
        </div>
        <div class="row_downloadbutton"><a class="pdf" href="Brochure-A.pdf" target="_blank">Download</a></div>
    </li>
    <li class="clearfix">
        <div class="row_filename">
            <p class="wpdf_file_name">Brochure B</p>
        </div>
        <div class="row_downloadbutton"><a class="pdf" href="Brochure-B.pdf" target="_blank">Download</a></div>
    </li>
    <li class="clearfix">
    ...
    </li>
    <li class="clearfix">
    ...
    </li>
</ul>

这是我的 jQuery:

jQuery(".row_downloadbutton>a").each(function(){
   jQuery(this).prepend(jQuery('.wpdf_file_name').html());
});
jQuery(".row_filename").remove();​

但是只有小册子 A 被重复到 row_downloadbutton..不是小册子 B、小册子 C 等等

我尝试了 .children()、.siblings()、.closest() 但没有用。

谢谢!

Answer 1

对于每个下载链接，获取 .closest() 公共(public)父级(在您的情况下可以是 .clearfix 或 li 或两者) ,然后.find()对应的.wpdf_file_name:

(function($) {
  $(".row_downloadbutton > a").each(function() {
    $(this).prepend(
      $(this).closest('li.clearfix').find('.wpdf_file_name').html()
    );
  });
  $(".row_filename").remove();
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="wpdf-list-style">
  <li class="clearfix">
    <div class="row_filename">
      <p class="wpdf_file_name">Brochure A</p>
    </div>
    <div class="row_downloadbutton">
      <a class="pdf" href="Brochure-A.pdf" target="_blank">
        Download
      </a>
    </div>
  </li>
  <li class="clearfix">
    <div class="row_filename">
      <p class="wpdf_file_name">Brochure B</p>
    </div>
    <div class="row_downloadbutton">
      <a class="pdf" href="Brochure-B.pdf" target="_blank">
        Download
      </a>
    </div>
  </li>
</ul>