Question

我正在尝试用创建的元素替换div，来自：

<div id='links'></div>

到

<div id='links'>
<ul>
<li><a href='#'>No</a></li>
</li>
</div>

我想将一个函数附加到我创建的<a>元素中的链接。创建所需的链接正在运行，但使用wrap函数将链接包装在<li>元素和<ul>元素中不起作用：

var no = $('<a>').attr({
    href: '#'
  }).click(function () {
    alert('clicked no');
    return false;
  }).text('no');

可以使用，但是no.wrap('<li></li>');仍然只是给了我一个未包装的<a>元素。我也试过$('#links').append('<ul>').append('<li>').append(no)，但这也不起作用。

有更好的方法吗？

Answer 1

no.wrap('<li></li>')仍会返回<a>元素，但会在其周围添加<li>元素。所以你可以no.wrap('<li></li>').parent()来包装它并返回<li>元素。

Answer 2

<script type="text/javascript">
$(function(){

    var list = $("<ul />");

    var no = $('<a />')
        .attr({ href: '#' })
        .click(function () {
            alert('clicked no');
            return false;
        })
        .text('no')
        .wrap("<li />")
            .parent()
            .appendTo(list);

    list.appendTo("#links");
});    
</script>

Answer 3

使用jQuery实际上可以将所有内容嵌套到包装器中，特别是如果您不需要自己处理单个项目。

您还可以创建要动态嵌套的新元素。无需创建一堆临时变量来保存它们。

只需将所有项目作为单独的参数传递给append（），即可同时追加多个项目。

var wrapper = $('<div/>', {
  id: 'links'
});

$(wrapper).append(

  $('<ul/>').append(

    $('<li/>').append(
      $('<a/>', {
        href: '#',
        text: 'Yes'
      })
    ),

    $('<li/>').append(
      //you can even keep going! 
      $('<a/>', {
        href: '#',
        text: 'No'
      })
    ),

    $('<li/>').append(
      $('<a/>', {
        href: '#',
        text: 'Maybe'
      })
    )
  )

);

在jquery中创建嵌套元素

3 个答案: