javascript - 根据 jquery 条件应用样式

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>

如果“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");

演示片段:

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

<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>