动态jQuery AppendTo选择器

Dynamic jQuery AppendTo Selector

本文关键字：选择器 AppendTo jQuery 动态      更新时间：2023-09-26

我有一个HTML页面，它正在向项目添加工具栏。该页面正在使用一些静态ID来实现这一点。最重要的代码行如下：

$('#tb').appendTo('.item-toolbar');

以上内容与单个项目的预期一致。但现在，我正在努力使它与多个项目一起工作。为了做到这一点，我创造了这把小提琴。最重要的代码如下：

function moveNugget() {
  var selected = $('#selector').val();
  var tb = $('#tb');
  var items = $('.item-container');
  // The following line is the one that is giving me problems.
  //.appendTo('.item-toolbar');
}

如果你参观Fiddle，它会更清楚。基本上，用户可以从下拉列表中选择1、2或3。选择后，工具栏应"附加到"相应的item-toolbar。我的挑战是，我不知道如何为动态选择的项目创建选择器并使用appendTo函数。

我真的很想使用appendTo，因为我的实际代码更复杂。我试着把它归结为给我带来问题的部分。这显然是我使用appendTo的方法。现在，我正在尝试：

$(tb).appendTo('.item-toolbar');

然而，这种方法完全忽略了所选项目。我不知道如何在appendTo的上下文中使用所选项目工具栏。

实现的变体之一：

  1. 在每个项目工具栏上添加唯一的ID(例如视图-0、视图-1、视图-2(

它看起来是这样的：

<select id="selector">
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
</select>
<button onclick="moveNugget();">
 Move
</button>
<br /><br />
<div class="view">
  <div class="item-container">
    <div class="item-title">
      [title]
    </div>
    <div id="view-0" class="item-toolbar">
      [tb]
    </div>
  </div>
</div>
<br />
<hr />
<br />
<div class="view">
  <div class="item-container">
    <div class="item-title">
      [title]
    </div>
    <div id="view-1" class="item-toolbar">
      [tb]
    </div>
  </div>
</div>
<br />
<hr />
<br />
<div class="view">
  <div class="item-container">
    <div class="item-title">
      [title]
    </div>
    <div id="view-2" class="item-toolbar">
      [tb]
    </div>
  </div>
</div>
<br /><br /><br />
<ul id="tb" style="list-style-type: none;">
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
</ul>
  1. 然后当你们点击按钮时，你们可以把你们的工具栏附加到适当的块上

这里是更改后的功能代码：

function moveNugget() {
  var selected = $('#selector').val();
  var tb = $('#tb');
  var items = $('.item-container');
  // Add toolbar to appropriate block
  tb.appendTo('#view-' + selected);
}

Fiddle

尝试：

function moveNugget() {
  var selected = $('#selector').val();
  var tb = $('#tb');
  var items = $('.item-container .item-toolbar')[selected];
  // The following line is the one that is giving me problems.
  tb.appendTo(items);
}
相关文章：