DOM中jQuery Append添加元素样式异常问题求助

问题根源 #

你的代码存在两个核心问题，导致样式不符合预期：

1. 执行顺序颠倒：你先尝试给页面所有<p>标签添加类，再插入新的<p>元素——这会导致新插入的元素根本没被添加目标类，反而已存在的元素会被重复追加类。
2. 全局选择器误用：$('p')会选中页面上所有<p>标签，后续循环会给之前的元素错误添加其他类（比如第二个商品是无货状态时，会给第一个已添加.inStock的<p>再追加.notInStock），最终样式因类冲突混乱。

修正后的代码 #

JavaScript 部分

const storeItems = [
  {
    name: 'TV',
    price: 800.00,
    inStock: true
  },
  {
    name: 'Phone',
    price: 700.00,
    inStock: false
  },
  {
    name: 'Game Console',
    price: 300.00,
    inStock: true
  },
  {
    name: 'Smart Watch',
    price: 200.00,
    inStock: false
  },
];

storeItems.forEach(function(item) {
  // 先创建单个p元素，添加对应类后再插入容器
  let pElement;
  if (item.inStock) {
    pElement = $(`<p>${item.name}: ${item.price}</p>`).addClass('inStock');
  } else {
    pElement = $(`<p>${item.name}: ${item.price} Not in stock</p>`).addClass('notInStock');
  }
  $('#appendToMe').append(pElement);
})

更简洁的写法（ES6箭头函数）

storeItems.forEach(item => {
  const displayText = item.inStock 
    ? `${item.name}: ${item.price}` 
    : `${item.name}: ${item.price} Not in stock`;
  const pElement = $(`<p>${displayText}</p>`).addClass(item.inStock ? 'inStock' : 'notInStock');
  $('#appendToMe').append(pElement);
});

修复逻辑说明 #

• 先通过$(<p>...</p>)创建单个jQuery元素对象，直接给该对象添加对应状态的类，再插入到目标容器中。
• 每个元素只会被添加自己对应的类，不会影响其他已存在的元素，样式就能按预期生效。

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