jQuery用适当的结束和结束标记包装选定的标记

jQuery wrap the selected markup with proper closing and ending tags

本文关键字：结束 包装 jQuery      更新时间：2023-09-26

我的标记是这样的。

<ul class="language-dropdown">
  <li class="lang-switch language_en current_lang ">
    <a href="#">
      <img src="res/flags/en.png" alt="en">
    </a>
  </li>
  <li class="lang-switch language_es ">
    <a href="#">
      <img src="res/flags/es.png" alt="es">
    </a>
  </li>
  <li class="lang-switch language_de ">
    <a href="#">
      <img src="res/flags/de.png" alt="de">
    </a>
  </li>
  <li class="lang-switch language_ja ">
    <a href="#">
      <img src="res/flags/ja.png" alt="ja">
    </a>
  </li>
</ul>

现在你可以看到我有一个li，它有一个current_lang类。现在，我希望jquery能够找到带有标记的类，并将选中的html标记添加到总ul中作为换行。我的意思是说输出应该像这样

<li class="lang-switch language_en current_lang ">
  <a href="#"><img src="res/flags/en.png" alt="en"></a>
<ul class="language-dropdown">
  <li class="lang-switch language_en current_lang ">
    <a href="#">
      <img src="res/flags/en.png" alt="en">
    </a>
  </li>
  <li class="lang-switch language_es ">
    <a href="#">
      <img src="res/flags/es.png" alt="es">
    </a>
  </li>
  <li class="lang-switch language_de ">
    <a href="#">
      <img src="res/flags/de.png" alt="de">
    </a>
  </li>
  <li class="lang-switch language_ja ">
    <a href="#">
      <img src="res/flags/ja.png" alt="ja">
    </a>
  </li>
</ul>
</li>

这样我就可以在顶部得到current_lang所有的列表作为下拉列表。我把代码写成这样

jQuery(document).ready(function() {
  var Current = jQuery('li.current_lang').prop('outerHTML');
  jQuery('ul.language-dropdown').wrapAll(Current);
});

但是这个是像这样换行的

<li class="lang-switch language_en current_lang ">
  <a href="#">
  <img src="res/flags/en.png" alt="en">
<ul class="language-dropdown">
  <li class="lang-switch language_en current_lang ">
    <a href="#">
      <img src="res/flags/en.png" alt="en">
    </a>
  </li>
  <li class="lang-switch language_es ">
    <a href="#">
      <img src="res/flags/es.png" alt="es">
    </a>
  </li>
  <li class="lang-switch language_de ">
    <a href="#">
      <img src="res/flags/de.png" alt="de">
    </a>
  </li>
  <li class="lang-switch language_ja ">
    <a href="#">
      <img src="res/flags/ja.png" alt="ja">
    </a>
  </li>
</ul>
</img>
</a>
</li>

所以有人能告诉我什么是简单的方法，以适当的方式得到它。任何帮助都是非常感激的。由于

正确关闭标记后，您的代码工作并获得所需的输出。小提琴。

<ul class="language-dropdown">
    <li class="lang-switch language_en current_lang "><a href="#">
        <img src="res/flags/en.png" alt="en" />
    </a></li>
    <li class="lang-switch language_es "><a href="#">
        <img src="res/flags/es.png" alt="es" />
    </a></li>
    <li class="lang-switch language_de "><a href="#">
        <img src="res/flags/de.png" alt="de" />
    </a></li>
    <li class="lang-switch language_ja "><a href="#">
        <img src="res/flags/ja.png" alt="ja" />
    </a></li>
</ul>

如果这不是您想要的输出，请添加注释。

相关文章：