相同类别的嵌套元素

Question

I need to either select the parent element(s) with the .plugin-class-name class. Alternatively, I could also make do with a list of childs that have the same class. (so no parents)

The problem is that when I use .find() I get both the parents and the children.

Some of my code:

 console.log($('#parentId').find('.plugin-class-name')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parentId"> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"> <div id="childId1"> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> </div> <div id="childId2"> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> </div> </div> <div class="plugin-class-name"></div> </div> 

Answer 1

您可以使用直接子选择器定位父元素：

$('#parentId > .plugin-class-name')

Answer 2

I will give more use examples:

 <div id="parentId"> <div class="row"> <div class="col-md-4"> <div class="plugin-class-name"></div> </div> <div class="col-md-4"> <div class="plugin-class-name"></div> </div> <div class="col-md-4"> <div class="plugin-class-name"> <div id="childId1"> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> </div> </div> <div class="col-md-4"> <div id="childId2"> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> <div class="plugin-class-name"></div> </div> </div> <div class="plugin-class-name"></div> </div>