Question

我正在使用@ Premasagar的nitelite jquery插件https://github.com/premasagar/nitelite为我的网站创建一个灯箱。我打电话给下面的功能。除了jquery在我的单个标记的末尾添加斜杠之外，这一切都很好 - 所以它们变成Content而不是Content我认为这是为了在人们添加像{{{}}这样的标签时制作有效的xhtml {1}}或<img> - 那么这里的语法是什么？

<input>

Answer 1

我不是jQuery专家，而是来自jQuery API doc：

.append（）方法将指定的内容作为jQuery集合中每个元素的最后一个子项插入

我认为，这意味着，

.append('<p>')

插入一个空段落。要在段落中添加内容，您应该使用与div和锚点相同的方法。

.append($('<p></p>', {html: content}))

Answer 2

和<div>不能使用相同的方法吗？像：


lb.open(
$('<div></div>', {
    html: 'hello world',
})
.append(
    $('<class="close"></p>', {
        html: $('<a></a>', {
                 click: function() {
                 lb.close();
                 return false;
              },
              href: '#',
              html: 'Close'
             })
     })
);

Answer 3

JavaScript不会将页面HTML作为字符串处理。相反，它适用于页面的树表示。这意味着您无法插入开始标记，也不能插入结束标记：您必须插入完整节点。所以替换这样的东西：

.append('<p>')

......用这个：

.append('<p></p>')

Answer 4

由于我认为插件不支持您想要实现的目标，因此您可以通过以下方式实现。

var lb = $.nitelite();
    lb.open(
        $('<div/>', {
            html: 'hello world',css: {
                            background: '#FFF',
                            padding: '10px',
                            width: 600,
                            border: '3px solid #CCC',
                            MozBorderRadius: '7px',
                            WebkitBorderRadius: '7px',
                            position: 'relative'
                        }
        })
        .append(
            $('<a></a>', {
                click: function() {
                    lb.close();
                    return false;
                },
                href: '#',
                html: 'Close'
            })
        )

    );
    $('.nitelite-lightbox-container').find('a').wrap('<p class="close"></p>');

Answer 5

看起来你接受了答案，但是我输入了这个，所以我希望它能帮助你将来调试。

我正在使用chrome，但我没有看到您描述的行为。亲自检查并针对它测试您的解决方案。显示结果后，您可以检查元素。

http://jsfiddle.net/pborreli/pJgyu/

<div>
  hello world
  <p class="close"></p>
  <a href="#">Close</a>
  <p></p>
</div>

斜杠添加到集合中附加的html元素

5 个答案: