Question

我在页面上有多个div。我需要根据子类的类添加各种类到“容器”。让我们说，如果有“测试优先”的范围，那么“容器”的类应该是“容器优先”。

Markup看起来像这样：

<div class="container">
   <span class="test first">Some text</span>
</div>
<div class="container">
   <span class="test second">Some text</span>
</div>

我的非工作代码是：

if ($('.container') != null) {
    var sCont = $('.container');
        for (var i = 0; i < sCont.length; i++) {
            if(serviceCont.has('.first').length) {
                sCont.addClass('first')
        }
    }
}

Answer 1

这是您需要的代码，play with it on Codenpen

$(function(){


  $('.container').each(function(){

    if($(this).children('.test.first').length > 0){
      $(this).addClass('first');
    }

    if($(this).children('.test.second').length > 0){
      $(this).addClass('second');
    }

  });

})();

Answer 2

if ($('.container').length >0) {
    $('.container').each(function(){
        if($(this).find('.first').length != 0) {
                $(this).addClass('first')
            }
        });
    }

$('.container')返回一个包含所有匹配元素的数组，它需要像数组一样使用

Answer 3

$('.container').children.each(function() {
     var parent = $('.container');
     if($(this).hasClass('EnterClassNameHere') {
        parent.addClass('EnterClassNameHere');
     }
});

Answer 4

使用jQuery，非常简单：

$('.test.first').parent('.container').addClass('first');

这将查看具有test和first类的所有元素（所以class="test first"或`class =＆＃34;首先测试＆＃34;不会物质）。

然后让所有父母的班级为container，然后给他们上课first。

如果您希望所有家长都不管，请在没有参数的情况下使用.parent()。如果要添加其他类，只需更改它即可。如果您想完全覆盖该类，请使用.attr('class', 'first')代替.addClass()。

Answer 5

如果结构总是与您在示例中显示的相同，那么：

＆＃13;

$('.container').each(function() {
  var span_class = $(this).find('span').attr('class').split(' ')[1];     
  $(this).addClass(span_class);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <span class="test first">Some text</span>
</div>
<div class="container">
   <span class="test second">Some text</span>
</div>

＆＃13;

输出

<div class="container first">
    <span class="test first">Some text</span>
</div>
<div class="container second">
    <span class="test second">Some text</span>
</div>

Answer 6

$('.container').each(function() {
  var $cont = $(this);
  $cont.children('span.first').each(function() {
    $cont.addClass('first');
  });
});

Answer 7

这是我提出的解决方案：

 $('.container').each(
 function(){
 var addClass = $(this).children().first().attr('class');
 addClass =addClass.split(' ');
 $(this).addClass(addClass[1]);
 });

选择所有带有容器类的div标签。
遍历每个元素。
将第一个孩子的类存储在变量中。
现在这将是一个字符串，让它拆分并得到一个数组。
我认为这是你想要加入的每个孩子的第二堂课父div标签，如果没有，我们可以在这里调整逻辑。

如果您有任何疑问，请与我们联系。：）

Answer 8

首先，使用索引模式作为序数类名的名称约定。而不是：第一，第二，第三...... 使用：order-1，order-2，order-3 ...... 然后检查所有现有的孩子并更新他们的父母：

假设：

<div class="container">
   <span class="test order-1">Some text</span>
</div>
<div class="container">
   <span class="test order-2">Some text</span>
</div>

此函数将使用其子类更新每个父类的类：

function copyStyleClassIntoParent(parentClass, childClass, patternPrefix) {
    var i = 0, $child;
    while (($child = $('.'+childClass+'.'+patternPrefix+(++i))).length) {
        $child.closest('.'+parentClass).addClass(patternPrefix+i);
    }
}

copyStyleClassIntoParent('container', 'test', 'order-');

注意：如果您打算多次这样做，您还应该使用'removeClass'删除父过时的类。

根据子类的类添加容器的css类

8 个答案: