Question

我有这样的标记。

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

现在你可以看到我有一个类有current_lang的li。现在我希望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>

有人可以告诉我，以正确的方式获得它的简单方法是什么。任何帮助都会非常明显。感谢

Answer 1

正确关闭标签后，您的代码可以正常工作并获得所需的输出。 FIDDLE。

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

如果这不是您要查找的输出，请添加评论。

jQuery使用正确的结束标记和结束标记包装所选标记

1 个答案: