javascript - 链接 jquery 追加

Question

我正在尝试弄清楚如何将多个追加链接到我的标记中。基本上在附加一个元素之后，我希望下一个元素将它附加到第一个附加元素。我希望我说的是有道理的。

如果你看一下我的代码，我只是附加了元素 <ul class="menu" />进入元素 #footer .research-centers-menu .research .

然后在下一个代码中，我尝试插入/附加变量 centers到 <ul class="menu" />

现在的当前输出不会插入元素，而是将其放在外面。为我糟糕的英语和解释道歉

var researchCenters = $('a[href$="/items"]').next().clone(),
  centersList = $('li', researchCenters),
  centers = centersList.slice(0);


var research = $('#footer .research-centers-menu .research').append('<ul class="menu" />');

$(research).append(centers);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="aim/items"></a>
    <ul>
      <li>item one</li>
      <li>item two</li>
    </ul>
  </li>
</ul>

<div id="footer">
  this is a footer
  <div class="research-centers-menu">
    <div class="research">

    </div>

  </div>
</div>

Answer 1

附加问题的原因是 append() 返回原始元素，而不是附加元素。

要使您的代码正常工作，您可以颠倒逻辑以便创建新的 ul，然后使用 appendTo()。这将保留附加 li 所需的引用。试试这个:

var researchCenters = $('a[href$="/items"]').next().clone(),
  centersList = $('li', researchCenters);

var $research = $('#footer .research-centers-menu .research');
var $ul = $('<ul class="menu" />').appendTo($research);
$ul.append(centersList);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="aim/items"></a>
    <ul>
      <li>item one</li>
      <li>item two</li>
    </ul>
  </li>
</ul>

<div id="footer">
  this is a footer
  <div class="research-centers-menu">
    <div class="research"></div>
  </div>
</div>