jQuery move/prepend html 列表中的文本无效

Question

我想将每个列表项文本（宣传册 A、宣传册 B 等）从 wpdf_file_name class 移动/添加到 row_downloadbutton > a，然后删除 row_filename

<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

对于每次下载 link，获取 .closest() 共同父级（在您的情况下可以是 .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>

Answer 2

您可以像这样使用 closest 和 find：

jQuery(this).prepend(jQuery(this).closest('li').find('.wpdf_file_name').html());

参见下面的演示：

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

<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>
  <li class="clearfix">
    ...
  </li>
  <li class="clearfix">
    ...
  </li>
</ul>

jQuery move/prepend html 列表中的文本无效

jQuery move/prepend html text in a list not working

html

javascript

each

jquery

append