获取子元素不是具有某个CSS类的容器的子元素

Question

我使用相同的模式嵌套控件并基于传递的控件div ID，我想选择除item之外的所有项目（“。inner”）内部控制。

<div id="Main" class="outer"> 
    <div class="item"> 
     <div class="inner">inner1</div> 

     <div id="Maininner" class="outer"> 
      <div class="item"> 
       <div class="inner">sub inner1</div> 
      </div> 
     </div> 

    </div> 
</div> 

<script type="text/javascript"> 

    function GetItem(id) { 
     var item = $($(id).find(".item:first")); 
     item.find(".inner:not(.outer .outer .inner)").each(function() { 
      alert(id + ": " + $(this).html()); 
     }); 
    } 

    if (typeof $ != "undefined") { 
     $(function() { 
      GetItem("#Main"); //expected output "inner1" , **working** 


      GetItem("#Maininner"); //expected output "sub inner1" **not working** 
     }); 
    }; 
</script> 

我想编写通用函数来处理这种情况。我尝试使用“：不是”，但它只适用于某些场景。 任何更好的方式来编写代码，这两种方案的工作？ 注意：我无法更改HTML结构。

Answer 1

可以使用孩子而找

即item.find（“内心：没有（.outer .outer .inner）‘）（’内部”），而不是使用儿童将选择直接孩子（即时内部元素）

function GetItem(id) { 
     var item = $($(id).find(".item:first")); 

     item.children(".inner").each(function() { 

      alert(id + ": " + $(this).html()); 
     }); 
    }