JQUERY添加类如果有类myclassN，其中N大于X交替宽度

Question

我有这段代码：

<style>
.div66{width: 66.6%}
.div33{width: 33.3%}
</style>

<div class="box1">content</div>
<div class="box2">content</div>
<div class="box3">content</div>
<div class="box4">content</div>
<div class="box5">content</div>
<div class="box6">content</div>
<div class="box7">content</div>
<div class="box8">content</div>
<div class="box9">content</div>
<div class="box10">content</div>

我需要使用jQuery函数获取下面的内容。

<style>
.div66{width: 66.6%}
.div33{width: 33.3%}
</style>

<div class="box1">content</div>
<div class="box2">content</div>
<div class="box3 div66">content</div>
<div class="box4 div33">content</div>
<div class="box5 div33">content</div>
<div class="box6 div66">content</div>
<div class="box7 div66">content</div>
<div class="box8 div33">content</div>
<div class="box9 div33">content</div>
<div class="box10 div66">content</div>

如果boxN大于3，则应用divXX类，并在第一次div66切换2x div33和2x div66之后

更新

我解决了使用CSS和nth-child

的问题

<style>
.box:nth-child(n+3) {width: 33.3%}
.box:nth-child(4n+3), .box:nth-child(4n+6) {width: 66.6%}
</style>

<div class="box box1">content</div>
<div class="box box2">content</div>
<div class="box box3">content</div>
<div class="box box4">content</div>
<div class="box box5">content</div>
<div class="box box6">content</div>
<div class="box box7">content</div>
<div class="box box8">content</div>
<div class="box box9">content</div>
<div class="box box10">content</div>

Answer 1

你可以通过，

来做到

var elems = $("div").filter(":nth-child(3)").addClass("div66").nextAll().get(),isThree = true;
for (var i = 0; i < elems.length; i += 2) {
  $(elems[i]).add(elems[i + 1]).addClass(isThree ? "div33" : "div66");
  isThree = !isThree;
}

DEMO

Answer 2

您可以尝试以下代码：

＆＃13;

＆＃13;

$(function() {
  var i = 1, prev = 66;
  $('[class^="box"]').each(function() {
    var num = $(this).attr('class').match(/\d+/);
    alert(num);
    if(num >= 3) {
      if(i == 0) {
        if(prev == 33) {
          $(this).addClass('div66');
          prev = 66;
          
        } else {
          $(this).addClass('div33');
          prev = 33;
          
        }
        i++;
      } else {
        i++;
        i = i%2;
        if(prev == 66) {
          $(this).addClass('div66');
          prev = 66;
          
        } else {
          $(this).addClass('div33');
          prev = 33;
           
        }
 
      }
    }
  })
})

＆＃13;

.div66{width: 66.6%; color: green;}
.div33{width: 33.3%; color: blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box1">content</div>
<div class="box2">content</div>
<div class="box3">content</div>
<div class="box4">content</div>
<div class="box5">content</div>
<div class="box6">content</div>
<div class="box7">content</div>
<div class="box8">content</div>
<div class="box9">content</div>
<div class="box10">content</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是我尝试在选择器上播放

＆＃13;

＆＃13;

function Import-ModuleRemotely([string] $moduleName,[System.Management.Automation.Runspaces.PSSession] $session)
{
    $localModule = get-module $moduleName;
    if (! $localModule) 
    { 
        write-warning "No local module by that name exists"; 
        return; 
    }
    function Exports([string] $paramName, $dictionary) 
    { 
        if ($dictionary.Keys.Count -gt 0)
        {
            $keys = $dictionary.Keys -join ",";
            return " -$paramName $keys"
        }
    }
    $fns = Exports "Function" $localModule.ExportedFunctions;
    $aliases = Exports "Alias" $localModule.ExportedAliases;
    $cmdlets = Exports "Cmdlet" $localModule.ExportedCmdlets;
    $vars = Exports "Variable" $localModule.ExportedVariables;
    $exports = "Export-ModuleMember $fns $aliases $cmdlets $vars;";

    $moduleString= @"
if (get-module $moduleName)
{
    remove-module $moduleName;
}
New-Module -name $moduleName {
$($localModule.Definition)
$exports;
}  | import-module
"@
    $script = [ScriptBlock]::Create($moduleString);
    invoke-command -session $session -scriptblock $script;
}

＆＃13;

$('div[class^=box]:gt(2)')
  .filter(':nth-child(4n+1), :nth-child(4n+2)')
  .addClass('div33');

$('div[class^=box]:gt(1)')
  .not('.div33')
  .addClass('div66');

＆＃13;

.div66 {
  width: 66.6%;
  border: 1px solid red;
}
.div33 {
  width: 33.3%;
  border: 1px solid blue;
}

＆＃13;

＆＃13;

＆＃13;