javascript - 如何在使用递增变量构建的父级中使用变量选择器查找子元素

Question

尝试向元素(ajax 购物车中的行)添加递增类名，同时对其子元素之一(每个购物车行中的图像)执行相同操作。

项目编号后，显示类名称中具有相同编号的匹配图像。

例如。 cartitem-1 显示 cartimage-1

var itemCount=0;
var imgCartCount=0;

if ($('.ajax-cart-row').length) {
  // itemize cart rows
  $('.ajax-cart-row').each(function() {
    itemCount++;
    var cartItemNumber = 'cartitem-'+itemCount;
    $(this).addClass(cartItemNumber);
    $(this).val(itemCount);
    console.log('cart numbers loaded');
  });
  // itemize images in cart
  $('.ajax-cart-row img').each(function() {
    IMGCount++;
    var cartImgs = 'cartimg-'+IMGCount;
    $(this).addClass(cartImgs);
    $(this).val(IMGCount);

    $(this).closest('.ajax-cart-row').find('[class*='+cartImgs+']').show();
    console.log('image numbers added');
  });

}

编辑:有多个 cartitem-# img 元素，没有任何单独的类/ids/文件名可供引用。这就是希望的目的。

希望我不只是在这里 sleep 不足......提前致谢

Answer 1

我不确定你到底想要什么，或者你的代码有什么问题(除了“显示”只是确保元素不被隐藏 - 也许你的图像默认是隐藏的？)。看看这样的事情是否有什么不同:

var itemCount=0;

if ($('.ajax-cart-row').length) {
  // itemize cart rows
  $('.ajax-cart-row').each(function() {
    itemCount++;
    var cartItemNumber = 'cartitem-'+itemCount;
    var cartRow = $(this);
    cartRow.addClass(cartItemNumber);
    cartRow.val(itemCount);
    console.log('cart numbers loaded');
    
    // add class to the image subelements (assumes only one, or that the same class is added to all img children of cartitem-#)
    var imageIdx = 0;
    cartRow.find("img").each(function() {
      imageIdx++;
      var cartImgs = 'cartimg-'+imageIdx;
      var cartImg = $(this);
      cartImg.addClass(cartImgs);
      cartImg.val(itemCount);
      
      if (imageIdx === itemCount) {
         cartImg.show();
      }
      console.log('image numbers added');
    });
  });

}

这应该确保逐项 .ajax-cart-row 的所有 img 子级将在类名中收到与收到的行相同的索引(即 cartitem-1 中的所有 img 标签将收到 cartimg-1 类) 。我希望这就是您正在寻找的。