Question

我想将每个列表项文本（手册A，手册B等）从w pdf_file_name课程移至/前置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

对于每个下载链接，请获取.closest()普通父母（可能是.clearfix或li或两者都属于您的情况），然后.find()相应的.wpdf_file_name }：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

见下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery移动/前置列表中的html文本不起作用

2 个答案: