Question

jQuery：如何创建新的div，分配一些属性，并从其他一些元素属性中创建一个id？

我怎样才能做到这一点。我在下面尝试的是不起作用，我不确定如何使它工作。

我要做的是创建一个div并为其分配一些属性，然后将此div附加到所有＆lt; li>在我的无序列表的最后一个节点上的元素。最后，但最重要的是我想从＆lt;中检索名为“p_node”的属性的值。 li>正被附加到并作为新创建的div的ID的一部分插入。

这是我当前的jQuery代码：

$('<div />,{id:"'+ $("#nav li:not(:has(li))").attr("p_node").val() +'_p_cont_div", class:"property_position"}').appendTo("#nav li:not(:has(li))");

以下是div创建之前的HTML：

<ul>
    <li p_node="98" class="page_name">Category A</li>
</ul>
<ul>
    <li p_node="99" class="page_name">Category B</li>
</ul>

这是我在新div创建后希望它看起来的样子：

<ul>
    <li p_node="98" class="page_name">Category A</li>
    <div id="98_p_cont_div" class="property_position"></div>
</ul>
<ul>
    <li p_node="99" class="page_name">Category B</li>
    <div id="99_p_cont_div" class="property_position"></div>
</ul>

更新

这有效：

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr(\'p_node\');
    self.after("<div  class=\'property_position\' />");
});

这不起作用：

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr(\'p_node\');
    self.after("<div id=\'" + p_node + "\' class=\'property_position\' />");
});

这也不起作用：

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr(\'p_node\');
    self.after("<div class=\'property_position\' />");
    $("li>div").attr("id",p_node);
});

Answer 1

您想为每个li附加一个不同的元素。

执行此操作的最佳方法是使用生成器函数调用append，如下所示:(未经测试）

$("#nav li:not(:has(li))").append(function(index, html) { 
    return $('<div />', {
        id:    $(this).attr("p_node").val() + '_p_cont_div', 
        class: "property_position"
    });
});

或者，您可以保留当前代码，然后使用检查父属性的函数在新插入的attr上调用<div>。

Answer 2

我去了：

$('selector').each(function () {
    var self = $(this);

    self.after('<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" />');
});

我无法弄清楚你想要执行哪些元素。

您目前遇到的问题是，您要为每个UL添加完全相同的元素，因为您首先生成元素，然后重复添加它。

（选择器需要匹配LI，但代码可以调整以匹配其他内容。）

Answer 3

这是语法错误，请尝试：

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr('p_node');
    self.after("<div id='" + p_node + "' class='property_position' />");
});

这个有语法错误和错误的选择器：

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr('p_node');
    self.after("<div class='property_position' />");
    self.next().attr('id', p_node);
});

但是你仍然缺少id的“_p_cont_div”部分，那么怎么样：

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr('p_node');
    self.after("<div id='" + p_node + "_p_cont_div' class='property_position' />");
});

但接下来我们将回到最初发布的内容：

self.after('<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" />')

jQuery：如何创建一个新的div，分配一些属性，并从其他一些元素属性创建一个id？

3 个答案: