jQuery代码var giftOne运行异常：判断grandFather是否带alone类为孙辈发礼品

错误原因 #

• 误用jQuery API：has()方法用于筛选后代节点包含指定选择器的元素，你的需求是判断.grandFather自身是否携带alone类，应该使用hasClass()方法实现。
• 判断逻辑永真：has()返回的是jQuery对象，即便无匹配结果也属于真值，原有if条件永远成立，会给所有.grandFather的孙节点追加内容，不符合需求。
• 未遍历多节点：原有逻辑仅对第一个匹配的.grandFather做判断，没有遍历所有同类节点分别处理。

修正后代码 #

CSS、HTML代码保持原有内容不变，仅修改JS逻辑即可：

$(function() {
  // 遍历所有grandFather节点逐个判断
  $(".grandFather").each(function() {
    // 仅当前节点自身带有alone类时执行追加逻辑
    if ($(this).hasClass('alone')) {
      const giftOne = $(this).find('.father table');
      giftOne.find(".firstChild").append(" Cake");
      giftOne.find(".secondChild").append(" pan Cake");
      giftOne.find(".thirdChild").append(" Donut");
    }
  })
})

修改后仅携带alone类的.grandFather节点下的孙辈会被追加对应食品内容，符合需求。

内容的提问来源于stack exchange，提问作者abcid d