为啥 Jquery 只影响第一个 div 元素？ [复制]

Posted 2023-05-07

【中文标题】为啥 Jquery 只影响第一个 div 元素？ [复制]

【英文标题】：Why does Jquery only affect the first div element? [duplicate]为什么 Jquery 只影响第一个 div 元素？ [复制]

【发布时间】：2013-05-29 04:35:43

【问题描述】：

我正在使用“替换”功能来删除 div 中的所有非数字值。

似乎 Jquery 替换只影响第一个元素。

这是我的 Jquery：

$('#comment').each(function() 
    var thz = $(this);
    var repl = thz.html(thz.html().replace(/\D+/g, ''));
);

HTML 代码：

<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment1" href="#"> c20ff113. </a>
<a id="comment1" href="#"> c201gf76341. </a>

结果：

2011 c20ff113。 c201gf76341.

我想要的结果是：

2011 20113 20176341

【参考方案1】：

你有重复的 id，这是无效的，而且 jQuery ID 选择器（或任何其他 id 选择器，如 document.getElementById 内部 jQuery 使用，因为带有 id 的元素被大多数浏览器索引并且是唯一的）将只返回第一个出现在 DOM 中。将其更改为 class 并查看它的工作原理：

$('.comment').each(function()  
     var thz =  $(this); var repl =
     thz.html(thz.html().replace(/\D+/g, '')); 
);

HTML

<a class="comment1" href="#"> c2fđf011. </a> 
<a class="comment1" href="#">c20ff113. </a> 
<a class="comment1" href="#"> c201gf76341. </a>

顺便说一句，你的身份证是这样的：-

<a id="comment1" href="#"> c2fđf011. </a> 
<a id="comment2" href="#">c20ff113. </a> 
<a id="comment3" href="#"> c201gf76341. </a>

从属性选择器开始会帮助你（但实际上会减慢你的速度，因为这是一个属性选择器并且失去了使用 ID 的优势）。

$('[id^=comment]').each(function()  // While using this better give a container context $('[id^=comment]', 'container').each(function...
    var thz = $(this);
    var repl = thz.html(thz.html().replace(/\D+/g, ''));
);

Demo

道德：ID 必须是唯一的

【参考方案2】：

HTML 页面中的 ID 应该是唯一的

这就是它只针对找到的元素的第一个实例的原因。

用类替换元素

$('.comment').each(function() 
       // Your code
);

【参考方案3】：

$('.comment').each(function()  var thz = $(this); var repl = thz.html(thz.html().replace(/\D+/g, '')); );

将 id 为 comment 的元素替换为 comment 类。

如果您在元素上多次使用 ID，则选择器只会选择具有该 ID 的第一个元素。

但是当你改用类时，选择器会选择所有具有该类的元素。

【参考方案4】：

如果您真的不想更改 html，您可以按属性使用选择器。但正如其他人所建议的那样，使用 class 而不是 id 是这里的最佳选择。

$('div[id="comment"]').each(function())

【讨论】：

我只想分享它是可能的。