Javascript:选择元素的下一个同级元素并通过单击更改其类(不使用ID)
在JavaScript中，要选择元素的下一个同级元素并通过单击更改其类，可以使用以下方法：
- 使用DOM操作方法：
- 首先，使用querySelector或querySelectorAll选择器选择要操作的元素及其下一个同级元素。例如，使用querySelector选择第一个div元素：
const element = document.querySelector('div'); - 然后，使用nextElementSibling属性获取下一个同级元素：
const nextElement = element.nextElementSibling; - 最后，使用classList属性来更改元素的类。例如，将下一个同级元素的类更改为"new-class"：
nextElement.classList.add('new-class');
- 首先，使用querySelector或querySelectorAll选择器选择要操作的元素及其下一个同级元素。例如，使用querySelector选择第一个div元素：
- 使用jQuery库：
- 首先，确保已引入jQuery库。
- 使用选择器选择要操作的元素及其下一个同级元素。例如，选择第一个div元素：
const element = $('div:first'); - 使用next()方法获取下一个同级元素：
const nextElement = element.next(); - 使用addClass()方法将下一个同级元素的类更改为"new-class"：
nextElement.addClass('new-class');
这种方法适用于需要通过单击事件来更改元素类的情况。可以根据具体需求进行适当的修改和扩展。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我有一个脚本，当点击时显示更多的信息，当再次点击时，它隐藏了信息。问题是，当单击时，它会显示和隐藏具有相同类名的所有div的信息，而不仅仅是被单击的那个div。我环顾四周，我想我需要在它的某个地方添加"this“，这样它就只影响被单击的对象。有没有人能解释一下我做错了什么，以及如何达到这个效果？
Javascript
<script type="text/javascript">
this$(document).ready(function(){
$(".toggle").click(function(){
$(&
浏览 1提问于2012-08-15得票数 1
回答已采纳
因此，自从我开始学习JavaScript以来，我一直在读这本由Tim写的名为“学习JavaScript”的书。
在这本书中，我发现了一个关于如何在DOM树中移动和目标元素的章节，其中之一是使用以兄弟姐妹为目标的属性，而在做书中的练习时，我根本无法使以下语句工作：
<ul id="nav">
<li><a href="/" id="home">Home</a></li>
<li><a href="/about" id="about"
浏览 3提问于2015-03-01得票数 7
回答已采纳
2回答
我有三个输入字段，用于收集用户的电话号码。我显示了一个字段，隐藏了另外两个字段。我已经在它下面放置了一个链接(添加家庭电话号码)，当您用户单击该链接时，它会显示隐藏的输入字段。当单击显示最后一个输入字段时，我在它下面又放置了一个链接。
<input type="text" />
<a href="#" class="show" >Add Home Number</a>
<div style="display: none">
<input type=
浏览 1提问于2010-10-27得票数 0
回答已采纳
这是我的html代码。由于很多原因，这种情况不能改变：
<ul class="menu">
<li>About Us
<div class="menuHover">
<ul class="left">
<li class="item"><a href="#" title="Link">Link</a>
<span class=
浏览 0提问于2011-08-22得票数 1
回答已采纳
3回答
下面是我的jQuery函数，用于将姓名、密码和电子邮件的值发送到register.php，然后在div#message中显示在register.php中回显的消息。
但是，当我单击postBtn时，什么也不会发生，控制台也不会记录所单击的内容。
jQuery
$(document).ready(function() {
$("#btnPost").on("click", function() {
console.log('clicked');
var thisBtn = $(this);
浏览 3提问于2012-02-24得票数 0
我想在将鼠标悬停在单元格上时显示弹出窗口
.cell:hover + .popup {
display: block;
}
但这是行不通的。仅当我将鼠标悬停在孔参数表上时，它才起作用。你能给我解释一下原因吗？这对我来说很奇怪，因为两者都是类。我不想使用javascript。
.table{
margin:auto;
display:table;
width:800px;
background-color:lightblue;
border-collapse:collapse;
}
.row
{
display:t
浏览 1提问于2017-03-01得票数 0
1回答
采用以下HTML结构和CSS
<div class="dropdown" onclick="addHover(this)">
<div class="Rtooltip">More Options</div>
<button class="table-menu dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphi
浏览 0提问于2018-05-11得票数 0
回答已采纳
在下面的代码中，当单击show/hide时，我尝试使用toolOptions span。现在，他们会显示，但不只是一个我点击，它将显示所有。是否有可能只获得低于图标的跨度来显示？
<!DOCTYPE html>
<html lang="en" dir="ltr" class="client-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
浏览 0提问于2013-10-22得票数 0
回答已采纳
7回答
我正在查看如何获取当前单击的下一个属性(类)的文本。就像这样..。
$(this).next().attr('class').text();
谢谢
编辑
这是我的HTML
<span class="Directory"></span>
<span class="Category">My Account</span>
当我点击“目录”时，我想得到类“类别”的文本
浏览 1提问于2012-02-29得票数 0
回答已采纳
1回答
我实现了一个javascript代码，它将div转换为画布。以下是代码：
JS
$(window).load(function(){
$(function() {
$(".btnSave").click(function() {
onrendered: function(canvas) {
thyCanvas = cnvs;
document.body.appendUncle(cnvs);
cnvs.toWall(function(Wall)
浏览 2提问于2015-08-20得票数 1
回答已采纳
1回答
动画菜单中的多个滑动Div
、、、、
所以，我想要的效果是：
这就是我想要的功能。但是，我想用动画菜单替换简单的链接单词。
我目前的代码如下：
divs没有出现！javascript与调用div是相同的。javascript编码中唯一的区别是增加了悬停动画。
var open = $('.open'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function(e){
e.preventDefault();
var $this = $(this),
浏览 0提问于2013-07-16得票数 0
回答已采纳
我有一个给定的HTML代码，我无法修改它：
<div>
<input type="text" id="name" />
</div>
使用CSS时，我会在输入后添加一个标签(after不适用于输入字段)：
div:after {
content:'label'
}
现在我想仅根据输入字段修改标签，如何选择:after元素？
input.error + * {
color: red;
}
不幸的是，我不能使用javascript，只能使用CSS！
浏览 0提问于2017-02-21得票数 1
我已经使用slideToggle创建了一个"dropdown“，用于在单击链接时显示内容。
当单击“查看打开时间”时，将显示一个显示时间的div。
问题是，在我的页面上有多个不同的位置，不同的打开时间。因此，只需使用一个函数，单击链接即可打开所有隐藏的div。如何只将一个链接链接到它的相关div？
HTML：
<div class="timeList">
<a>See opening times</a>
<p class="openingTimes" style="display
浏览 2提问于2013-03-08得票数 0
回答已采纳
在下面的代码中，我希望看到显示红色、蓝色、绿色和棕色行，但似乎除了红色之外的所有行都被隐藏，就像nextUntil参数被忽略一样。有什么线索吗？谢谢。
在一些研究之后，我尝试了这两种方法
$("#firstrow").nextUntil('span[class="hues"]').hide();
和
$("#firstrow").nextUntil('span:not(.colors)').hide();
HTML：
<!DOCTYPE html>
<html>
<hea
浏览 2提问于2013-05-02得票数 1
回答已采纳
我有三个要素：
<div class='first'>First</div>
<div class='second'>Second</div>
<div class='target'>Target</div>
单击target div，我在js中测试.prev()函数。
$(document).on('click','.target',function(){
console.log($(this).prev().html());
浏览 9提问于2014-11-18得票数 2
回答已采纳
它是有效的：
<div class="xpav">
Create
</div>
<div class="apr" style="display: none;">
sometext
</div>
<script>
$('.xpav').click(function() {
$(this).next(".apr").slideDown("fast");
})
</script>
它不会：
<d
浏览 0提问于2011-04-19得票数 0
回答已采纳
3回答
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".link").click(function()
浏览 0提问于2011-03-25得票数 0
2回答
我有一个组名列表，对于每个组名，我有一个学生名称列表。在单击组名时，我想显示每个组下的名称列表。
就像。
group 1(#clicked)
A
B
C
group 2(#not clicked)
group 3(#clicked)
F
E
R
我有两个模特
1:组(id，name) 2:学生(id，name，group_id)
HTML:-
{% for group in groups%}
<span class="group-list" data-id="{{group.id}}">{{
浏览 3提问于2015-11-02得票数 1
回答已采纳
我需要从以列表格式单击的父元素中选择一个类。同时阻止显示具有相同类名的其他类。
所以，举个例子：
$('ul').click(function() {
$('li').next(".info").css({ "display" : "block" });
});
当我将.info设置为display:none;时
我的html代码是：
<ul>
<li><span>Guy</span></li>
<li class="
浏览 0提问于2012-09-08得票数 0
回答已采纳
我有这样的代码：
var toLoad = $('.sidebar').find('.active').next('li.list-element').attr('data-id');
它将使用.active类检测在我的list-element类之后的下一个元素。不是的。问题是，我有一个这样的清单：
<li class="list-element active">...</li>
<li class="list-element">...</li>
&l
浏览 3提问于2015-04-21得票数 0
回答已采纳
2回答
我有一个清单：
<ul class="products">
<li class="products p1">first</li>
<li class="description p1">first</li>
<li class="products p2">second</li>
<li class="description p2">second</li>
<li class="
浏览 2提问于2012-09-07得票数 1
回答已采纳
1回答
我试图在单击按钮时使用jQuery将div的display属性设置为阻止，但由于有多个按钮，div将出现在每个按钮上。
HTML：
<button class="btn btn-dropdown"><i class="fa fa-caret-down" aria-
hidden="true"></i></button>
<div class="dropdown-opt"></div>
jQuery：
$('.btn-dropdown').on
浏览 1提问于2017-07-19得票数 0
回答已采纳
2回答
我正在尝试为ul li a元素获取特殊的样式。代码如下：
<ul id="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
我希望第二个链接(两个)具有与其他两个(一个和三个)不同的样式(color)。
这就是我一
浏览 0提问于2013-07-30得票数 5
回答已采纳
3回答
给定如下所示的超文本标记语言结构，我希望如果您单击ul中的一个p，该ul旁边的div.selected将对其执行.css("background", "yellow")。
<ul>
<li>
<p>Hello</p>
<p>Hello</p>
</li>
</ul>
<div>Hello Again</div>
<div class="selected">Hello
浏览 0提问于2011-12-14得票数 3
回答已采纳
在这里，我想隐藏msg_wrap div，它离单击的msg_head类最近(之后)。我的jquery：
$(document).on("click", ".msg_head", function() {
$(this).closest('.msg_wrap').slideToggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
浏览 3提问于2015-10-06得票数 1
回答已采纳
我有一个HTML结构，如下所示：
<a id="checkAllButton" onclick="...">...
<a id="uncheckAllButton" onclick="...">...
<span ...>
<div class="box collapsible-box csvTable-box">...
我有一个jQuery引用<a>作为onClick of checkAllButton的结果
当我检查时(作为一个表变量)：
$(this
浏览 1提问于2015-02-20得票数 3
回答已采纳
我有两个元素，inside a div的作者和城市，如下：
<div>
<h1>author</h1>
<h1>citation</h1>
</div>
如果作者和引用都存在，我会在作者和引用之间加一个逗号。如果它们中只有一个存在，或者都不存在，我什么也不做。
有没有办法在没有JavaScript的情况下用CSS或Sass来做到这一点？
浏览 7提问于2020-03-03得票数 1
回答已采纳
3回答
<head>
<script type="text/javascript">
$(document).ready(function(){
$(".open_list").hide();
$(".trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("800");
});
});
</script>
我正在做一个列表，里面有一些隐藏的div，我做了这个jquery函数
浏览 0提问于2011-03-21得票数 0
回答已采纳
3回答
这是可行的：
<a href="#/link1">link1</a>
<a href="#/link2">link2</a>
<a href="#/link3">link3</a>
$("a[href*='#/link1'").next('a[href*="#"]').click();
但这不是：
<a href="#/link1">link1</a><br>
浏览 0提问于2011-01-12得票数 10
回答已采纳
伙计们
我试图做的功能，当用户按回车，它会自动聚焦到下一个输入区。下面是我编写的代码(基本上，我把@keyup.enter="$event.target.nextSibling.focus()放在每个input元素中，我不明白为什么它不能工作。
<form
id="formContact"
action
method="post"
autocomplete="on"
autocapitalize="on"
ref="
浏览 3提问于2019-11-17得票数 3
我试图通过单击已附加的锚来显示附加的div中的一些数据。
<body>
<div class="container">
<br><append></append><br>
<button class="btn btn-primary" style="margin-top: 15">add</button>
</div>
</body>
jQuery
$('button').on('click
浏览 1提问于2019-01-23得票数 1
回答已采纳
1回答
当“拒绝”复选框被勾选时，我正在尝试创建一个下拉列表。我已经用Jquery简单地做到了这一点，但是因为我需要对所有拉入的数据使用该函数，所以它会将类复制到下一行，依此类推，所以当我选中reject按钮时，它会打开所有下拉文本区域来输入原因。我想知道如何在无限数据量的情况下做这个？所以它只会打开一个下拉文本区域。
我在网上读到我可以用php育儿做到这一点？至少可以说，我的PHP技能很弱，有没有更简单的方法来解决这个问题呢？
HTML名称用户名电子邮件验证拒绝
if ($supplier['Id'] != '3') { ?>
&
浏览 1提问于2013-07-31得票数 0
尝试访问下一个可用的div后，我点击了一个链接，用一个类moreProductsBox，然后slideToggle它打开。
这就是我现在所拥有的：
链接：
<div class="productContent">
<p><a href="#" onclick="return false;" class="viewMoreProducts">View Related Products </a></p>
</div>
<div class="pro
浏览 2提问于2010-12-30得票数 0
回答已采纳
我有这样的设想：
<div id="parent">
<div id="a"></div>
<li class="b"></li>
</div>
在我的例子中，只有在id a之后，我才想向类b添加页边距-top:5 5px；，注意这些不是子元素，而是在相同的元素中。
我想要一种使用纯CSS或CSS3的方法，而不需要使用更少或更少的服务。我知道使用JavaScript或jQuery也可能做到这一点，只是想知道它是否可以在CSS中实现，以及如何实现。
浏览 2提问于2014-07-30得票数 4
回答已采纳
我有以下html代码：
<input type="text" name="username" width="40" size="9">
<span name="foo"></span>
<input type="password" name="password" width="40" size="9">
我希望在单击用户名时获得下一个输入元素名称，这是我所做的：
$(document).on("c
浏览 0提问于2013-06-04得票数 0
回答已采纳
2回答
我得到了以下源代码，它是由PHP服务器文件生成的：
<div class="row">
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="200"/>
<img src="xxx.jpg" data-imgurl="xxx.jpg" width="2
浏览 1提问于2015-08-25得票数 0
回答已采纳
4回答
当我单击一个名为sections的类的元素时，我应该得到一个警告，显示它的类索引是什么，但它显示的是一个错误的数字。
例如，如果我使用一个名为div的类单击第一个sections元素，那么javascript警报应该是1，而不是3。
是否有一种使用click()使用jQuery来锁定类索引的方法？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>this is the title</title>
<style>
.sec
浏览 3提问于2017-12-14得票数 2
回答已采纳
我正在构建一个网页，其中许多跨度需要从一个类转换到另一个类，这样才能有效地创建bg颜色fadein。相同类的元素在页面中的分布是混合的，但它们都在公共类下分组。
我想要创建这样一个行为:当您单击类-n的任何元素时，该类转换的其他元素将以单击的元素作为起点。
这在很大程度上得到了解决，这要感谢一些关于SO；的帮助。
$(".div").click(function () {
var itemClasses = this.classList;
var itemThread = itemClasses[1];
colorThread($(this), ite
浏览 4提问于2014-02-01得票数 0
回答已采纳
这应该很简单，但是我已经通过帮助了大约一个小时了，似乎什么也没有起作用。帮助!
我基本上是试图在用户点击旁边的链接后，提取SPAN的文本(地址)。请注意，我将有大约10页，所以我不能设置一个静态地址。当用户单击时，必须将其拉出。
html代码：
<a href="3" class="clicky">Click to Show Map</a>
<span style="display: none" class="theaddy">123 Fake Street, Somewhere Else,
浏览 6提问于2012-12-16得票数 1
回答已采纳
我有以下问题。我有一个div，里面有两个元素。第一个元素可以在里面有孩子。第二个元素只有文本。
如果仅在前一个元素中没有元素，我希望显示文本。
好的，这很难理解，所以这里是一个。如您所见，我在第二个元素中有两个框(在第一个元素中)和文本。这样，我想要隐藏文本的div。但是如果我要删除这些框，文本就会出现。
使用javascript完全没有问题(计算span中元素的大小，如果0-显示文本，而不是0-隐藏文本)。问题是，我正试图用纯HTML和CSS实现同样的目标。
有办法这样做吗？
浏览 3提问于2014-04-01得票数 2
回答已采纳
我绝不是jQuery (或JavaScript)专家，所以如果我误解或忽略了什么，请原谅我。我有以下HTML：
<html>
<body>
<div class="ted">Ted</div>
<div class="ted">Ted</div>
<div class="tim">Tim</div>
<div class="ted">Ted</di
浏览 5提问于2012-12-07得票数 0
回答已采纳
3回答
我在html中选择某个元素时遇到了问题。
当我点击带有类"event_rsvp“的链接时，我想用最近的”感兴趣的状态“类在下一个li中实现span的HTML，我试着去找父母，我如何告诉一个人和另一个人说话。
<li rel="101590"><span class="rsvp-status">Are You Going? – <a href="javascript:;" class="event_rsvp" rel="attending">RSVP<
浏览 0提问于2009-11-09得票数 1
回答已采纳
我正在尝试使用.next()为每个Span元素添加一个不同的类，这是jQuery：
<script type="text/javascript">
$(function() {
$("a", "div.top_menu").addClass("ui-icons-custom");
$("span.ui-icon:first", "ul.top_menu_list").addClass("ui-icon-pencil")
浏览 0提问于2010-07-14得票数 2
回答已采纳
4回答
下面是我的HTML代码，我希望从第一个active中删除li类，并将它添加到第二个li中，反之亦然，每2秒使用jQuery自动完成一次。
<li class="">
<a href="#">
<img src="client_logo01.png">
</a>
</li>
<li class="active">
<a href="#">
<img src="cl
浏览 0提问于2014-08-28得票数 0
回答已采纳
好吧，我已经通过了一些基础知识，但我不能做到这一点。问题是我不想为任何ul或li指定id或class，如果我单击ul中包含的标题，我想要切换li (显示/隐藏)。如何在不指定id和class的情况下选择标题下的li？下面是我尝试过的：
<nav>
<ul>
<header>Menu 1</header>
<li>test</li>
<li>test</li>
<li>test</li>
&
浏览 1提问于2012-08-20得票数 0
回答已采纳
1回答
鼠标悬停时附加的事件侦听器
、、、、
我是Javascript的新手，正在尝试将一个匿名函数附加到事件侦听器。该函数的作用是，当mouseover第一个元素时，将根据第一个元素中文本的长度在第二个元素中显示一条消息。
但是，当我将鼠标悬停在第一个元素上时，什么也没有发生。因为我是JavaScript的新手，我不确定我做错了什么。
function checkLength(event, minLength){
var el, elementTwo;
el = event.target;
elementTwo = el.nextSibling;
浏览 18提问于2016-09-19得票数 0
回答已采纳
3回答
我在以下html上使用jquery ()方法：
<div id="NavBar">
<div class="dropDownList">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Products</span>
浏览 7提问于2014-01-28得票数 0
回答已采纳
4回答
我有以下HTML
<div class="test">Click Me</div>
<div class="something">hello</div>
<div class="yes">yes!</div>
<div class="taco">stackoverflow</div>
<div class="super">Whatever</div>
如何使用jQuery单击$('div.
浏览 0提问于2012-02-04得票数 1
回答已采纳
所以我有这个html
<div id="content_div">
<div>
<img src=""/>
<img src="" />
<img src="" />
<div class="tes
浏览 1提问于2014-11-30得票数 3
回答已采纳
我的代码
$('.viewreplycommentbutton').click(function() {
$(this).next('.reply').slideToggle(200);
});
我有三个带有.reply类的<div>，当我单击带有链接的按钮(具有.viewreplycommentbutton类)时，它将只显示这三个<div>中的一个
我想在单击按钮(这是一个带有.viewreplycommentbutton类的链接)时查看所有这些内容，但不希望从jQuery代码中删除$(this)。
浏览 10提问于2016-07-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
