Question

例如，如果我有这样的HTML代码：

<div class="color-ff0000"></div>

jQuery是否可以在"color-"之后取任何内容并将其附加到类这样的

color:ff0000

基本上是创建动态类吗？

我找到了我需要的东西，这就是答案：

＆＃13;

$("[class*='color'], [class*='bgcolor']").each(function() {
    var elClasses = $(this).attr('class').split ( ' ' );
    var elCur = $(this);
    for (var index in elClasses) {
        if (/^color-\w+$/.test(elClasses[index])) {
            var classColor = elClasses[index].split ( '-' )[1];
           	elCur.css('color', '#' + classColor);
        }
        if (/^bgcolor-\w+$/.test(elClasses[index])) {
        		var classBgColor = elClasses[index].split ( '-' )[1];
           	elCur.css('background-color', '#' + classBgColor);
        }
    }
});

＆＃13;

.height{
  width:200px;
  height:100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-673AB7 height dfg  sefg bgcolor-ff0000 "><h1>Banana Developer</h1></div>

<div class="color-eeeeee height dfg  sefg bgcolor-212121 "><h1>Banana Developer</h1></div>

＆＃13;

也不知道为什么这个问题被标记为重复，问题与上面链接的问题完全不同。也无法在stackoverflow上的任何其他地方找到它。

Answer 1

您可以用短划线拆分班级名称，弹出最后一部分并附加：

var _theDiv = $('div');
var className = _theDiv.attr('class');
console.log(className);
var color = className.split('-').pop();
console.log(color);
_theDiv.addClass(color);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-ff0000">Hi</div>

Answer 2

试试这个：

    (function($){
     var class_id = 1;
    $("body div").each(function(){
        var className = $(this).attr('class'); 
        var color_split = className.split('-'); 
        var new_class = "class_" + class_id;
        $("#style_block").append("." + new_class + "{" + color_split[0] + ":" + color_split[1] + ";" + "}");
        $(this).addClass(new_class );

        class_id++;
     }); 
 })(jQuery);

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<style type="text/css" id="style_block"></style>
<div class="color-#ff0000">test1</div>
<div class="background-#ff0000">test2</div>
<div class="color-blue">test3</div>

jQuery获取类名，并将其名称附加到特定的css规则？

2 个答案: