blocks|key|618910|text|向$()函数添加上下文参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618911|$(".subLink")+-->+$(".subLink",+this)将使jQuery只匹配“.subLink”，后者是给定上下文元素的子元素。|offset|length|style|CODE|618912|entityMap^0|0|0|D|I|J|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Add a context parameter to the $() function.

<code>$(".subLink")</code> --> <code>$(".subLink", this)</code> will make jQuery only match ".subLink"s that are children of the given context element.

blocks|key|290583|text|您可以通过不将类添加到链接中来简化这一点，因为您已经在将类添加到父td中，因此可以通过使用CSS来锁定链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|290584|代码在之前|offset|length|style|BOLD|290585|$(".subMenuTD").hover(+++++++++++++++++++++++
++function()+{
+++++$(this).addClass("subMenuTDActive");++++++++++++++++++++++++++++++++
+++++$(".subLink").addClass("subLink-white");
++},
++function()+{
+++++$(this).removeClass("subMenuTDActive");++++++++++++++++++++++++++++++++
+++++$(".subLink").removeClass("subLink-white");
++}
);|code-block|syntax|javascript|290586|编码后的|290587|$(".subMenuTD").hover(+++++++++++++++++++++++
++function()+{
+++++$(this).addClass("subMenuTDActive");+++++
++},
++function()+{
+++++$(this).removeClass("subMenuTDActive");++++
++}
);|290588|新CSS规则|290589|.subMenuTDActive+.subLink+{
+++/*+Add+hover+link+styling+here+*/
}|290590|这将起作用，因为".subMenuTDActive+.subLink“比".subLink”具有更高的特异性，因此将覆盖".subLink“规则。|290591|entityMap^0|0|0|3|0|0|0|4|0|0|0|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|X|$]]

You can make this even simpler by not adding the class to the link, since you are already adding a class to the parent td, and can thus target the link by using CSS:

Code before

<pre><code>$(".subMenuTD").hover( 
 function() {
 $(this).addClass("subMenuTDActive"); 
 $(".subLink").addClass("subLink-white");
 },
 function() {
 $(this).removeClass("subMenuTDActive"); 
 $(".subLink").removeClass("subLink-white");
 }
);
</code></pre>

Code after

<pre><code>$(".subMenuTD").hover( 
 function() {
 $(this).addClass("subMenuTDActive"); 
 },
 function() {
 $(this).removeClass("subMenuTDActive"); 
 }
);
</code></pre>

New CSS rule

<pre><code>.subMenuTDActive .subLink {
 /* Add hover link styling here */
}
</code></pre>

This will work because ".subMenuTDActive .subLink" has a higher specitivity than ".subLink", and will thus override the ".subLink" rule.

blocks|key|654424|text|您可以使用AKX的解决方案，或者：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|654425|$(".subMenuTD").hover(
++++++++++++++++++++function()+{+
++++++++++++++++++++++++++++$(this)
+++++++++++++++++++++++++++++++.addClass("subMenuTDActive")
+++++++++++++++++++++++++++++++.children(".subLink")
+++++++++++++++++++++++++++++++.addClass("subLink-white");
++++++++++++++++++++},
++++++++++++++++++++function()+{++++++++++++
++++++++++++++++++++++++++++$(this)
++++++++++++++++++++++++++++++++.removeClass("subMenuTDActive");
++++++++++++++++++++++++++++++++.children(".subLink")
++++++++++++++++++++++++++++++++.removeClass("subLink-white");
++++++++++++++++++++}
++++++++++++);|code-block|syntax|javascript|654426|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use AKX's solution, or:

<pre><code>$(".subMenuTD").hover(
 function() { 
 $(this)
 .addClass("subMenuTDActive")
 .children(".subLink")
 .addClass("subLink-white");
 },
 function() { 
 $(this)
 .removeClass("subMenuTDActive");
 .children(".subLink")
 .removeClass("subLink-white");
 }
 );
</code></pre>

blocks|key|654434|text|AKX的解决方案是正确的。或者，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|654435|$(this).children(".subLink")|code-block|syntax|javascript|654436|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

AKX's solution is correct. Alternatively, you can do:

<pre><code>$(this).children(".subLink")
</code></pre>

blocks|key|281560|text|我是干症组的。当你只使用css的时候，你到底为什么要使用javascript呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|281561|+.subMenuTD:hover+{
+++++++++++++++++++background-color:+#ccc;
+++++++++++++++++++}

+.subLink:hover+{
+++++++++++++++++color:+#fff;
+++++++++++++++++}|code-block|syntax|javascript|281562|或者更好的(我认为)，去掉不应该并且应该删除的td元素的样式，将链接设置为display:block，然后可以在一个元素下面声明悬停样式：|281563|+.subLink+{
++++++++++display:+block;
++++++++++}

++.subLink:hover+{
+++++++++++++++++background-color:+#ccc;
+++++++++++++++++color:+#fff;
+++++++++++++++++}|281564|除非您无法控制html，或者您有一些关键任务--依赖于保持不变的标记，“它已经在使用表了，我知道，起诉我”是一个非常糟糕的借口。这是你的子菜单，无纸桌：|281565|<ul+class="subMenu">
<li><a+href="newsletter.html">Newsletter</a></li>
<li><a+href="news_archive.html">News+Archive</a></li>
<li><a+href="events.html">Events</a></li>
</ul>|281566|大约花了30秒。下面是导航条/滚转的CSS：|281567|+.subMenu+li+{
++++++++++display:+inline;
++++++++++list-style:+none;
++++++++++}

++.subMenu+a+{
++++++++++color:+#000;
++++++++++background-color:+#fff;
++++++++++text-decoration:+none;
++++++++++display:+block;
++++++++++}

+++.subMenu+a:hover+{
++++++++++color:+#fff;
++++++++++background-color:+#ccc;
++++++++++}|281568|那可能花了一分钟时间，因为我得让它看起来很漂亮。|281569|我不是想成为一个恶霸，也不是对你施加压力，但是非语义代码是不应该鼓励的，如果你在寻求帮助的话，我觉得给它不对，因为我知道它将被用于一个不符合标准的网站。|281570|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

I'm with drthomas. Why on earth are you using javascript at all when you can just use css?

<pre><code> .subMenuTD:hover {
 background-color: #ccc;
 }

 .subLink:hover {
 color: #fff;
 }
</code></pre>

Or even better (me thinks), get rid of styling the td elements that you shouldn't have and ought to be working on removing, set the links as display:block, and then you can declare the hover style under one element:

<pre><code> .subLink {
 display: block;
 }

 .subLink:hover {
 background-color: #ccc;
 color: #fff;
 }
</code></pre>

And unless you have no control over the html or you have something mission-critical that relies on the markup staying the same, "it's already using tables, i know, sue me" is a really poor excuse. Here is your sub-menu, sans table:

<pre><code>&lt;ul class="subMenu"&gt;
&lt;li&gt;&lt;a href="newsletter.html"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="news_archive.html"&gt;News Archive&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="events.html"&gt;Events&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

That took about 30 seconds. Now here is the CSS for the navbar/rollover:

<pre><code> .subMenu li {
 display: inline;
 list-style: none;
 }

 .subMenu a {
 color: #000;
 background-color: #fff;
 text-decoration: none;
 display: block;
 }

 .subMenu a:hover {
 color: #fff;
 background-color: #ccc;
 }
</code></pre>

That took maybe a minute more, because I had to make it look pretty.

I'm not trying to be a bully or come down on you, but non-semantic code is not something that should be encouraged, and if you are looking for help with something, I wouldn't feel right giving it knowing it was going to be used on a site that wasn't compliant.

I am trying to create a rollover effect with jQUery. I have similar things, however because I am trying to do a mouseover with a an object that has a link in it I am having problems.

I have a level-2 nav bar. The placeholder's are table cells (bad I know - but it's already done this way). I want to change the background from white (#FFF) to dark grey (#999). I also want to change the text from dark grey to white.

Since the text is a link, I have to specify a class within the link tag to ensure that it is dark grey without an underline and doesn't default to the blue, underlined text.

The code I have written causes all the links of class="subLink" to change to being white from grey when anyone of them is "hovered over". I only want this to happen for the particular item in question - that is the background should become grey and the link should become white.

HTML and jQuery are below:-

<pre><code>&lt;td class="subMenuTD"&gt;&lt;a href="newsletter.html" class="subLink"&gt;Newsletter&lt;/a&gt;&lt;/td&gt;
&lt;td class="subMenuTD"&gt;&lt;a href="news_archive.html" class="subLink"&gt;News Archive&lt;/a&gt;&lt;/td&gt;
&lt;td class="subMenuTD"&gt;&lt;a href="events.html"&gt;Events&lt;/a&gt;&lt;/td&gt;
</code></pre>

<hr>

<pre><code>$(".subMenuTD").hover(
 function() { 
 $(this).addClass("subMenuTDActive");
 $(".subLink").addClass("subLink-white");
 },
 function() { 
 $(this).removeClass("subMenuTDActive");
 $(".subLink").removeClass("subLink-white");
 }
 );
</code></pre>

How to stop jQuery from matching multiple elements

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正试图用jQUery创建一个滚转效果。然而，我也有类似的事情，因为我试图用一个有链接的对象做鼠标操作，我遇到了问题。我有个二级导航吧。占位符的是表格单元格(我知道不好--但它已经这样做了)。我想把背景从白色(#FFF)改为深灰色(#999)。我也想把文字从深灰色改为白色。因为文本是一个链接，所以我必须在链接标记中指定...

问如何阻止jQuery匹配多个元素
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何阻止jQuery匹配多个元素EN