how to select only the parent element with a class?

• ❌ not all elements with a class like it do document.querySelectorAll(".mycard")

• ✅ but only the first parent element with the class,

  • and this element that we take don't need to have a parent with .mycard

it needs to return an array with all the divs that meet these conditions, and should work with every deep tree (10 of deep is a good point it is difficult to do)

• so it should not consider a div if not have the class, and go deep until finds the class we want, breaks, tries to search to others and repeat the process, and return us an array.
• if we find the wanted class, we add it to the array to return BUT
  • we need to check if the nested divs continue or not
    • if continue and we don't any other nested thing is fine don't return anything new
    • if it stops we need to search if there is another div with class, if add it to the array and repeat process until we finish the tree deep.

here is an example where you try your code:

    <div > <!-- should get the parent only -->
      <div >
        <div >
          <div ></div>
        </div>
      </div>
    </div>

    <div > <!-- should get also this with a array of the fist and second -->
      <div >
        <div >
          <div ></div>
        </div>
      </div>
    </div>

    <div >
      <div > 
        <!-- should get also this that isn't in body directly -->
      </div>
    </div>

    <div >
      <div >
        <div >
          <div > 
            <!-- should get also this that isn't in body directly -->
          </div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <div >
          <div > <!-- this -->
            <div >
              <div > <!-- also this -->
              </div> 
            </div>
          </div>
        </div>
      </div>
    </div>

    <div > <!-- this -->
      <div >
        <div > <!-- also this -->
          <div > 
            <div ></div> 
          </div>
        </div> 
      </div>
    </div>

    <!-- returns [mycard, mycard, mycard, mycard, ...] 8 in total here, loopable in forEach -->

returns [mycard, mycard, mycard, mycard, ...] 8 in total here, loopable in forEach

CodePudding user response：

You can use document.getElementsByClassName and convert the result to an array. From there, you can use .filter(). Like this:

let els = [...document.getElementsByClassName('mycard')];
els = els.filter(el => !el.parentNode.classList.contains('mycard'));

console.log(els);

<div >
  <!-- should get the parent only -->
  <div >
    <div >
      <div ></div>
    </div>
  </div>
</div>

<div >
  <!-- should get also this with a array of the fist and second -->
  <div >
    <div >
      <div ></div>
    </div>
  </div>
</div>

<div >
  <div >
    <!-- should get also this that isn't in body directly -->
  </div>
</div>

<div >
  <div >
    <div >
      <div >
        <!-- should get also this that isn't in body directly -->
      </div>
    </div>
  </div>
</div>

<!-- returns [mycard, mycard, mycard, mycard] loopable in forEach -->

CodePudding user response：

You can easily play with negation and descendant selectors to achieve your requirement.

//this will select all "mycard" classed elements 
which are not descendants of any "mycard" classed elements.

document.querySelectorAll(".mycard:not(.mycard mycard)");

You can also achieve it using JQuery.

$(".mycard").not('.mycard .mycard');