如何使用自动编号类进入点击功能

Question

我在网页上多次使用以下HTML格式，这是由PHP生成的。

<a href="#" class="generate">generate</a><div class="selectArea selectBox"></div>

现在我使用此代码为每个div提供各自的类

$(document).ready(function() {
  $(".selectArea").each(function(i) {
    $(this).addClass("selectBox" + (i+1));
  });
});

但现在我需要改变这个：

$(".selectBox").html($select);

位于点击功能

内

$(document).on('click', '.generate', function () {

因此它也适用于（i + 1）。

我试图实现的目标

上述代码是整个项目的一部分。在这个项目中，我有一个选择框，其中包含从多个输入生成的选项。在.html中，我将此选择框添加到div中。但是现在它被添加到页面上的所有div而不是一个。

Answer 1

如果.generate元素在.selectBox div之前，则代替：

$(".selectBox").html($select);

使用jQuery的.next()：

$(this).next('.selectArea').html($select);

Answer 2

我认为每个div都被赋予同一个类，所以所有div都会受到影响。

在你的函数之外声明我，因此它是全局的。也给它一个更好的名字。

像这样的东西

var select_box_count = 0;
$(document).ready(function() {
  $(".selectArea").each(function() {
    select_box_count ++;
    $(this).addClass("selectBox" + (select_box_count+1));
  });
});

Answer 3

您可以使用id

来引用它

在你只想要那个的div中

$('#id').html($select);

或者只使用像

这样的选择器

$('.selectBox:first-child').html($select);

或者只是

$(".selectBox")[number element].html($select);