CODEWITHSUNDEEP
javascriptjquery
JanuszFrontEnd'u
JanuszFrontEnd'u

Reputation: 471

Nested elements with the same class

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>

Upvotes: 0

Views: 240

Answers (2)

JanuszFrontEnd&#39;u
JanuszFrontEnd&#39;u

Reputation: 471

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>

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can use immediate child selector for targeting parent elements:

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

Upvotes: 2

Related Questions