如何批量选择ID为standings-@pool.PoolId格式的div元素并设置样式？

嘿，这两个需求其实都有清晰的解决思路，我来一步步给你说明：

1. 通过Model.ID选择元素 #

结合你给出的@pool.PoolId这类Razor语法，假设是ASP.NET这类后端模板引擎的场景，操作思路如下：

第一步：后端渲染绑定ID #

先在HTML里把Model的ID值绑定到元素的id属性（或者更灵活的data-*属性，避免id冲突风险）：

<!-- 直接绑定到id属性 -->
<div id="@Model.ID">目标元素</div>

<!-- 推荐：用data属性绑定，适配更复杂场景 -->
<div data-model-id="@Model.ID">目标元素</div>

第二步：前端选择元素 #

• 原生JS方式：
  直接通过id选择：

  // 模板渲染后，@Model.ID会被替换成实际值（比如"user-123"）
  const targetElement = document.getElementById('@Model.ID');
  

  通过data属性选择（更安全，避免id重复问题）：

  const targetElement = document.querySelector('[data-model-id="@Model.ID"]');
  

• jQuery方式：

  // 通过id选择
  const $targetElement = $('#@Model.ID');
  // 通过data属性选择
  const $targetElement = $('[data-model-id="@Model.ID"]');
  

2. 一次性选中所有id="standings-@pool.PoolId"的div #

这类动态ID的核心特点是前缀固定（standings-）、后缀动态，我们可以用属性选择器批量匹配，效率很高：

方法1：CSS直接设置样式（最便捷） #

用^=属性选择器，表示「属性值以指定字符串开头」，直接给所有符合条件的div写样式：

/* 选中所有id以"standings-"开头的div */
div[id^="standings-"] {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px;
  margin-bottom: 10px;
}

方法2：JS批量操作元素 #

如果需要在JS里对这些div做交互（比如添加事件、动态修改样式），用querySelectorAll：

• 原生JS方式：

  // 获取所有符合条件的div
  const allStandingsDivs = document.querySelectorAll('div[id^="standings-"]');
  
  // 遍历处理每个div
  allStandingsDivs.forEach(div => {
    // 示例：添加点击事件
    div.addEventListener('click', () => {
      console.log('点击了 standings div:', div.id);
    });
    // 示例：修改边框颜色
    div.style.borderColor = '#2196F3';
  });
  

• jQuery方式：

  // 选择所有符合条件的div并链式操作
  $('div[id^="standings-"]')
    .css('borderColor', '#2196F3')
    .on('click', function() {
      console.log('点击了 standings div:', $(this).attr('id'));
    });
  

补充：其他属性选择器（按需使用） #

如果你的动态ID是后缀固定、前缀动态，可以用$=（属性值以指定字符串结尾）；如果ID包含指定字符串，用*=（属性值包含指定字符串），不过你的场景用^=最精准。

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