Javascript 在一个div部分中找到一个类别a的多个单选按钮，然后对其他div块分别重复

我试图找到一个具有“radior”类的DIV，然后找到该DIV中具有“newone”类的所有span元素，并根据有多少“newone”实例，向其中添加某个类。这一切都很好，但我希望功能在完成后重置，并找到下一类“radior”，然后重新启动

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

目前我所拥有的是“newone”的所有实例，而不是每个div.radior块

<div class="form-group radior">

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

备选案文1a

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

备选方案1b

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

备选案文2a

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

备选方案2b

备选案文2c

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

这里有一把小提琴向你展示我已经拥有的东西：

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

---

欢迎任何帮助。谢谢

使用

jQuery

的

each（）

和

find（）

方法

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

您可以访问由

$（…）枚举的元素（
.radior
DIV，在回调闭包中通过
this
访问每个（）

，并使用

.find（）

方法选择

.newone

元素，相对于特定的

.radior

DIV（当前您将css类应用于所有

.newone

元素，而不仅仅是当前枚举DIV下的元素）：

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

$（'.radior'）。每个（函数（）{
var ones=$（this.find（'.newone'）；//当前.radio的newone's
var计数=1.length；
开关（计数）{
案例1：
案例2：
案例3：
var sub=['满'、'半'、'三']；
//重要提示：“one.addClass（…）”，而不是“$（'.newone'）。addClass（…）”
addClass（sub[count-1]+“col-xs-12 col md-”+（12/count））；
打破
案例4：
1.addClass（“四分之一col-xs-12”）；
打破
案例5：
addClass（“另一个col-xs-12”）；
打破
}
})；

.full{颜色：红色；}
.half{颜色：蓝色；}
.third{颜色：绿色；}
.quarter{颜色：粉红色；}
.另一种{颜色：橙色；}

传奇1
传奇1
备选案文1a
备选方案1b
备选案文1c
传奇2
传奇2
备选案文1c
备选案文1c

代码中的问题在于语句var

n=$（“.newone”）.length；

在这里，您无法获得特定

div

上的

newone

类的跨度，您正在使用

each

函数循环，因此它返回总计数

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

您只需在

每个

函数中的特定div中找到span，就可以使用

$（this）

访问当前的

div，也就是说，通过使用
this
关键字，以这种方式
var n=$（this）。查找（.newone”）.length；
您将获得正确的span计数

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

检查下面的代码片段。我在您的代码中观察到了一些与代码气味相关的东西，我想对它们提出一些建议

                    <label for="Option 1b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 1b</div></span> 
                    </label>

                    <label for="Option 2b ">
                        <input type="radio"> <span class="newone"><div class="moveme">Option 2b</div></span> 
                    </label>

您的html在类名中有不必要的空格，并且您的html格式不正确。这会降低代码的可读性。您可以使用类似的html格式设置程序
函数和else if块上都有不必要的分号，代码块上不需要这些分号，但在某些地方，例如可以用来检查JavaScript代码质量的单击事件上，这些分号丢失了
if-else阶梯有点长，所以可以使用switch语句来获得更好的性能

$（'.all'）。单击（函数（）{
$（this）.closest（'div'）。find（'.selected'）。removeClass（'selected'）；
$（this.addClass（'selected'）；
});
函数radioAddClass（）{
$（“.radior”）。每个（函数（）{
var元素=$（this.find（“.newone”）；
var n=元素长度；
开关（n）{
案例1：
元素。addClass（“完整col-xs-12 col-md-12”）；
打破
案例2：
元素。添加类（“半列xs-12列md-6”）；
打破
案例3：
元素。添加类（“第三列-xs-12列-md-4”）；
打破
案例4：
元素。添加类（“四分之一列xs-12”）；
打破
案例5：
元素。addClass（“另一个col-xs-12”）；
打破
}
});
}
radioAddClass（）；
.full{
颜色：红色；
}
.一半{
颜色：蓝色；
}
.第三{
颜色：绿色；
}
.四分之一{
颜色：粉红色；
}
.另一个{
颜色：橙色；
}

传奇1
传奇1
备选案文1a
备选方案1b
备选案文1c
传奇2
传奇2
备选案文1c
备选案文1c
谢谢Ankhzet，当然，非常感谢你的指导。完美的“我知道你也会为别人做同样的事”-StackOverflow的MO=）