獲取子元素不是具有某個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()); 
     }); 
    }