IE 中不正确的 jQuery 选择

Posted 2023-05-09

技术标签:

【中文标题】IE 中不正确的 jQuery 选择【英文标题】：Incorrect jQuery Selection in IE 【发布时间】：2011-03-07 04:10:11 【问题描述】：

我正在编写一个基本应用程序，其中涉及更改名称引用的 div 中的 html，它在 Chrome、Firefox、Safari 等中运行良好，但在我们心爱的 Internet Explorer 中却不行。我正在动态加载内容，所以我不能给你完整的代码，但这里有一个 HTML 的例子（那里会有很多这样的 div 与升序的数字名称堆叠在一起）：

<div id="entry" class="entry" name="15">
    <div id="comment" class="comment" name="15">Click here...</div>
    <div id="rating" class="rating" name="15">24</div>
</div>

和这里是当用户点击“条目”div时触发的jQuery函数：

$.fn.rateup = function() 
    var dname = $(this).attr('name');
    var rating = $("div.rating[name="+dname+"]").html();
    var newrating = parseInt(rating)+1;
    $("div.rating[name="+dname+"]").html(newrating);

现在，我想要发生的是被点击的条目 div 内的评级 div 中的 HTML 增加一，但在 IE 中，条目 div below 的评级增加了点击.我不知道它怎么可能在这里选择了错误的 div，因为它有一个非常具体的名称，在我的代码中非常清楚地引用了它。我尝试在单击的条目 div 中使用 jQuery 的 .find() 方法做同样的事情，并得到相同的结果。我被难住了。

点击here 看看我在说什么。它可能是其他方式的错误，但这是我目前唯一关心的东西。如果最坏的情况变得最糟，当且仅当在 IE 中呈现时，我可以让它使用 [name=parseInt(dname)-1] 选择元素，但我想找到一个不那么 hackey 的解决方案。

感谢您的意见。

编辑（6/24 晚上 11:30）

结合下面的答案和我新发现的知识，即一些古怪的 CSS 将事物定位在令人困惑的地方（除非处理正确，否则内联浮动右侧会将事物弹出到下一行），我已经解决了这个问题。感谢大家帮助我成为更好的编码员。我将开始更正确地使用属性！

【问题讨论】：

【参考方案1】：

好吧，我认为你混淆了选择器。

<div id="e15" class="entry">
    <div class="comment">Click here...</div>
    <div class="rating">24</div>
</div>

如果您现在尝试选择评级 div，“this.rating”应该会选择正确的。

PS 您的姓名字段不是必需的，在 xhtml 中无效。（因为它只能是表单域的成员）

【讨论】：

你的答案是 2 中更正确的，尤其是使用上下文。 +1 这确实产生了正确的选择，并调整了我的 CSS 我现在将评论定位在正确的位置。感谢大家的帮助。【参考方案2】：

我不认为 DIV 元素可以具有 name 属性，但这无关紧要，因为如果您针对单击的 DIV 进行所有计算，则不需要它...

<div id="entry" class="entry">  
    <div class="comment">Click here...</div>  
    <div class="rating">24</div>  
</div>

<div id="anotherEntry" class="entry">  
    <div class="comment">Click here...</div>  
    <div class="rating">17</div>  
</div>


$.fn.rateup = function()  
    var ratingElement = $(this).find("div.rating"); 
    var rating = ratingElement.html(); 
    var newrating = parseInt(rating)+1; 
    ratingElement.html(newrating);

这假定每个评级 DIV 都包含在其自己的条目 DIV 中，并且每个都附加了 $.fn.rateup 事件处理程序。

至于选择错误评级的原因，这将取决于附加了事件处理程序的元素 - 我们可以看到执行此操作的代码吗？

【讨论】：

【参考方案3】：

如果您正确使用 id，您似乎可以简化一切。 ;)

id 在整个页面上应该是唯一的，并且看起来您使用它们更像是类。也许使用像“1”这样的id作为条目，使用“c1”和“r1”作为评论和评级将允许更清晰的选择器，从而完全解决问题。然后你可以做类似的事情