Fatal编程技术网
  • javascript/
  • Javascript 如何在一个html中只找到一个完全相同的类，并且在用鼠标单击时有两个同名的类？

Javascript 如何在一个html中只找到一个完全相同的类，并且在用鼠标单击时有两个同名的类？

javascript jquery html css dom

Javascript 如何在一个html中只找到一个完全相同的类，并且在用鼠标单击时有两个同名的类？,javascript,jquery,html,css,dom,Javascript,Jquery,Html,Css,Dom,我有两个完全相同的html代码我的html代码是： <body> <div class="1">1</div> <div>2</div> <div class="3">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div class="

我有两个完全相同的html代码我的html代码是：

<body>
<div class="1">1</div>
<div>2</div>
<div class="3">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

<div class="1">1</div>
<div>2</div>
<div class="3">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
谢谢大家!

下面是一个使用现有结构的工作示例。移除
.parent（）
并替换为
.nextall（'.3:first'）
。nextAll将搜索单击的div的同级，找到第一个与我们的选择器匹配的div
。3:first
.3
是类，而
：first
是第一个匹配结果的伪选择器

$(document).ready(function() {
    $(".1").click(function() {
        $(this).nextAll(".3:first").css("background", "red");
    });
});
工作

以下是一个使用现有结构的工作示例。移除
.parent（）
并替换为
.nextall（'.3:first'）
。nextAll将搜索单击的div的同级，找到第一个与我们的选择器匹配的div
。3:first
.3
是类，而
：first
是第一个匹配结果的伪选择器

$(document).ready(function() {
    $(".1").click(function() {
        $(this).nextAll(".3:first").css("background", "red");
    });
});
工作

由于您所有的
div
都是兄弟姐妹，您需要找到下一个
div
单元，即类为
.3
的单元。为此，请使用
nextUntil（）
。这将获得第二个
div
。现在执行
.next（）
以到达目标
div

注意：最好不要在
id
或
class
名称开头加数字。尽管HTML5允许，CSS/CSS3仍然存在干净地处理它们的问题

片段：

$（“div.1”）。单击（函数（）{
$（this）.nextUntil（“div.3”）.next（）.css（“背景”，“红色”）；
});

div{
宽度：20px；高度：20px；
边框：1px纯色灰色；
显示：内联块；
}



1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.

5
由于您所有的
div
都是兄弟姐妹，您需要找到下一个
div
单元，即类为
.3
的div。为此，请使用
nextUntil（）
。这将获得第二个
div
。现在执行
.next（）
以到达目标
div

注意：最好不要在
id
或
class
名称开头加数字。尽管HTML5允许，CSS/CSS3仍然存在干净地处理它们的问题

片段：



$（“div.1”）。单击（函数（）{
$（this）.nextUntil（“div.3”）.next（）.css（“背景”，“红色”）；
});

div{
宽度：20px；高度：20px；
边框：1px纯色灰色；
显示：内联块；
}



1.
2.
3.
4.
5.
6.
7.
1.
2.
3.
4.
5
您可以尝试以下方法：


$(document).ready(function() {
    $(".1").click(function() {
        $(this).nextUntil(".3").next().css("background", "red");
    });
});


您可以尝试以下方法：


$(document).ready(function() {
    $(".1").click(function() {
        $(this).nextUntil(".3").next().css("background", "red");
    });
});



通过这种方式，列表可以通过ajax更新数据



通过这种方式，列表可以通过ajax更新数据


如果是“你的”html代码，为什么不在这两个部分周围放置另一个容器


<body>
    <div class="section">
        <div class="1">1</div>
        <div>2</div>
        <div class="3">3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>    
    <div class="section">
        <div class="1">1</div>
        <div>2</div>
        <div class="3">3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>


如果是“你的”html代码，为什么不在这两个部分周围放置另一个容器


<body>
    <div class="section">
        <div class="1">1</div>
        <div>2</div>
        <div class="3">3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>    
    <div class="section">
        <div class="1">1</div>
        <div>2</div>
        <div class="3">3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>



这不是我想要的工作方式。我不想选择所有的.3类，我只想选择与某人单击的.1类最接近的类。例如，如果您单击第一个.1类，则它应仅选择第一个.3类（背景为红色），如果您单击第二个.1类，则仅选择第二个.3类（div），则它不会按照我希望的方式工作。我不想选择所有的.3类，我只想选择与某人单击的.1类最接近的类。例如，如果单击第一个.1类，则它应该只选择第一个.3类（背景为红色），如果单击第二个.1类，则只选择第二个.3类（div）
closest（）
将上升到主体，并丢失您最初单击的div的上下文，因此最近div的概念不再有效。
closest（）
将向上搜索DOM层次结构，而不是在兄弟中。同时调用
parent（）
将上升到主体，并丢失您最初单击的div的上下文，所以最近的div的想法不再有效了。