Question

我有以下html如下：

    <div class="outerdiv">
      <div class="title">
      <div class="innerdiv">
        <div class="outerdiv">
         <div class="title">
         <div class="innerdiv">
          <div class="outerdiv">
           <div class="innerdiv>
<div class="outerdiv">
         <div class="title">
         <div class="innerdiv">
</div>
</div>
</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

我必须对"border-width:10px"的所有div应用class = innerdiv，前提是“ outerdiv ”同时包含“标题”和“ innerdiv ” 。我的预期输出是：

    <div class="outerdiv">
      <div class="title">
      <div class="innerdiv" style="border-width:10px">
        <div class="outerdiv">
         <div class="title">
         <div class="innerdiv" style="border-width:10px">
          <div class="outerdiv">
           <div class="innerdiv>
<div class="outerdiv">
         <div class="title">
         <div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

我正在尝试这个：

$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").

编辑：div的数量是动态的，而不是固定的数量

Answer 1

您需要使用:has选择器和直接子选择器来定位innerdiv元素：

$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");

DEMO SNIPPET：

＆＃13;

$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
  <div class="title">1
  <div class="innerdiv">2
    <div class="outerdiv">3
     <div class="title">4
     <div class="innerdiv">5
      <div class="outerdiv">6
       <div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

＆＃13;

Answer 2

您可以使用良好的css层次结构执行此操作，只需将样式应用于

即可

 .outerdiv > .title > .innerdiv{
    css goes here
 }

并且它们只会影响您提到的层次结构中的div。

Answer 3

只需使用：

$('.innerdiv').css('border-width','10px');

它会为所有div添加border-width with class＆＃39; innerdiv＆＃39;。

根据jquery条件应用样式

3 个答案: