Question

我之前已经问过类似头衔的问题，我看到了答案。

我在HTMl中有一个 ul 元素：

$('.collection').append('<li class="collection-item">'+'Hello'+'</li>');

在此元素 li 元素是通过JavaScript动态添加的：

var j = 1;
$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;

现在，对于每个 li 元素，我想在其class属性中添加一个数字，以便唯一地标识每个 li 元素，以便我可以指定不同的 id 属性给他们。为此，我写道：

$('.collection-item').hover(
        function(){
        var idd = $(this).attr('id');
        console.log(idd);
        }
 );

当我尝试通过悬停事件获取 li 元素的 id 时：

def bbox2(img):
    rows = np.any(img, axis=1)
    cols = np.any(img, axis=0)
    ymin, ymax = np.where(rows)[0][[0, -1]]
    xmin, xmax = np.where(cols)[0][[0, -1]]
    return img[ymin:ymax+1, xmin:xmax+1]

未定义将在控制台中打印。

此实施有什么问题？

修改 list [i] .username的值工作正常，它的值来自另一个文件，并没有造成任何麻烦。

Answer 1

改为使用

var j = 1;
$('.collection').append('<li class="collection-item'+j+'">'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;

您的代码中存在语法错误，请使用上面的代码。

要悬停上班，请执行此操作

$('.collection-item'+j).hover(
        function(){
        var idd = $(this).attr('id');
        console.log(idd);
        }
 );

Answer 2

据我所知，你在该字符串中的i位置导致我在html className属性之外，实际上根本不在任何html属性中。你的代码：

$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');

将导致最终的标记：

<li class = "collection-item"0>Hello</li>
<li class = "collection-item"1>Hello</li>

零没有HTML标记并且不合适。

@sphinx的评论是正确的答案，但它“没有被解雇”，因为他的代码导致每个列表项都有一个唯一的类名，其末尾的数字如下：

<li class = ".collection-item0">Hello</li>
<li class = ".collection-item1">Hello</li>

当您添加on hover操作时，您可以通过类“.collection-item”选择这些元素，而不是唯一的类。

您的解决方案如下所示：

$('.collection').append('<li class="collection-item '+j+'">'+ 'Hello'+'</li>');
$('.collection-item.'+j).attr("id",list[i].username);

这样，在你的最终标记中，每个列表项都有两个类 - 一个共享的“collection-item”类，以及一个像这样的数值：

<li class="collection-item 0"></li>
<li class="collection-item 1"></li>

现在您可以使用选择器$(".collection-item.4")通过两个类选择每个列表项（在此示例列表项4中），并使用选择器$(".collection-item")对所有集合项应用操作。

我觉得这个代码看起来有点丑陋，我不确定如果它是我的，我自己是否会对结构感到高兴，但这里有一个jsfiddle作为概念证明： https://jsfiddle.net/0wqeouxo/（点击每个列表项，它会提醒其ID）

我认为你可以在循环中获得jquery功能的更多里程，而不是内联定义类。

Answer 3

它是一个动态追加元素。所以你可以使用on()。并像这样更改选择器。[class^="collection-item"]它将匹配同一个类名元素包含在类中的其他名称

$(document).on('hover' ,'li[class^="collection-item"]',function(){
        var idd = $(this).attr('id');
        console.log(idd);
        });

Answer 4

由于jQuery以异步方式运行，当您尝试设置id时，该元素可能还没有在dom中。您可以在附加元素之前设置id，例如：

$('<li class="collection-item '+j+'">'+ 'Hello'+'</li>')
  .attr("id",list[i].username)
  .appendTo('.collection');

如何在HTML标记的属性中设置JavaScript变量

4 个答案: