如何选择附加的元素

How to select an appended element?

本文关键字：元素 选择 何选择      更新时间：2023-09-26

我正在尝试使用jQuery &Javascript。我正在尝试创造一个与鱼等互动的海洋。

我在页面上随机放置fishdiv，代码如下:

$newfish = $("<div id='fishToLeft'></div>").css({
    'left': randomX + 'px',
    'top': randomY + 'px',
}) 
$newfish.appendTo('#sea');

鱼的图片是在CSS中配置的。

现在我想动画这些div(它附加了大约20条鱼)，但我不知道如何选择附加的鱼div (fishtolleft &fishToRight)。

有人能帮我吗?

解决!我使用了相同的类，而不是为所有的鱼使用相同的id，现在它工作了。

感谢您的快速回答

使用类而不是id，因为id应该是唯一的。

$newfish = $("<div class='fish'></div>").css({

按类选择:

$('.fish');

或者，如果只有fish作为子元素存在，则只选择children:

$('#sea').children();

通过将fish引用存储在数组中，可以避免重新选择它们:

var fish = [];
// in your loop
fish.push($newfish);

对每条鱼做点什么:

$.each(fish, function(){
});

这段代码的问题是您有多个具有相同id的元素，这是错误的。我会使用class或自定义属性。例如，带class选择器:

$newfish = $("<div class='fishToLeft'></div>").css({
    'left': randomX + 'px',
    'top': randomY + 'px',
}) 
$newfish.appendTo('#sea'); 
var $fishesToLeft = $(".fishToLeft"); // array of elements/fishes to left

试试这个:

$newfish = $("<div class='fish'></div>").css({
     'left': randomX + 'px',
     'top': randomY + 'px',
})

假设你想要点击事件，那么:

$(".fish").on("click", function(){
    var myFish = $(this);
})

myFish将包含被点击的元素

id表示页面上唯一的单个元素。

因此，fishToLeft和fishToRight不是ids，而是classes。

所以，你需要使用:

<div class="fishToLeft"></div>
<div class="fishToRight"></div>

之后，当你想要选择所有的鱼时，你可以使用:

var fishesToLeft = document.getElementsByClassName('fishToLeft'); 
var fishesToRight = document.getElementsByClassName('fishToRight');
相关文章：