通过类搜索更改跨度样式答案

【问题标题】：span style change by class search通过类搜索更改跨度样式
【发布时间】：2013-07-25 20:47:57
【问题描述】：

我想要做的是更改跨度的样式属性。我可以通过搜索类的子元素，但它并没有改变那个元素的样式。这是我的代码：

$(".cmbdiaclase > span").each(function ()
    {
         if($(this).attr("class") == "selectBox-label"){
            $(this).style.width = "70px"; //no change style a element

         }
    });

希望你能帮助我，谢谢。

【问题讨论】：

改用$(this).hasClass('selectBox-label')。
改用$(this).style.width("70px");，因为这就是你使用这种方法的方式..定义在这里api.jquery.com/width
$(".cmbdiaclase > span.selectBox-label").width(70); 也是如此。

标签： jquery styles

【解决方案1】：

$(".cmbdiaclase > span").each(function () {
    if($(this).hasClass('selectBox-label')){
        $(this).css('width', '70px'); 
    }
});

【讨论】：

【解决方案2】：

这是使用改进的选择器实现更多 jQuery 风格的另一种方法

$(".cmbdiaclase > span.selectBox-label").css("width", "70px");

但请记住，除非您的 <span> 元素将 CSS display 属性设置为 block 或 inline-block，否则您不会看到 CSS width 属性发生任何变化。

如果您想保留相同的代码，则只需更改原始代码中的一些内容即可。设置 CSS 样式时，您应该使用.css()。测试课程时，您可以使用.hasClass(className)

$(".cmbdiaclase > span").each(function ()
{
     if($(this).hasClass("selectBox-label"))
     {
        $(this).css("width", "70px");

     }
});

【讨论】：

【解决方案3】：

$(".cmbdiaclase > span").each(function () {
        if($(this).hasClass('selectBox-label'){
             $(this).css('width', '70px');
        }
});

【讨论】：

【解决方案4】：

这里是你的解决方案，你需要使用 CSS() 函数来改变样式。

$(".cmbdiaclase > span").each(function ()
    {
         if($(this).hasClass("selectBox-label")){
            $(this).css('width','70px'); //no change style a element

         }
    });

【讨论】：

【解决方案5】：

你几乎是对的：

$(".cmbdiaclase > span").each(function () {
    // use hasClass, instead of checking the attr("class"), this will only work if it has 1 class.
    if($(this).hasClass('selectBox-label')){
        // This is wrapped in a jQuery $( ) which makes it a jQuery object
        $(this).css('width', '70px');

        // Not wrapped in a jQuery $( ), it stays the DOM object. 
        this.style.width = "70px";  
    }
});

所以这取决于你如何在上下文中使用它。你想要一个 jQuery 对象还是一个 DOM 对象。

【讨论】：

【解决方案6】：

JS：

变化：

$(this).style.width = "70px"; //no change style a element

收件人：

$(this).style.width("70px");

由 jQuery 的文档为 width 定义：

.width(值)

价值类型：字符串或数字一个表示像素数的整数，或一个整数以及附加的可选度量单位（作为字符串）。

正如其他人提到的，您还应该更改以下用途：

if($(this).attr("class") == "selectBox-label"){

收件人：

if($(this).hasClass('selectBox-label')){

如 hasClass 的 jQuery 文档所定义：

描述：确定任何匹配的元素是否被分配给给定的类。
.hasClass( className )
类名
类型：字符串
要搜索的类名。

【讨论】：