Question 37179 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

get last child when using Flex order Css – Jquery

I am not able to detect last child when using flex order to rearrange divs.
since I have arranged order of CSS with Order. its still getting the last child as per dom tree. items divs are dynamic. so we cant use nth-child.
how should I get the last child when rearranged with order. There can be multiple items that need to be shown on top. I need CSS or js based solution.
my code

    <div class="mainWrap">
     <div class="item">first</div>
     <div class="item">second</div>
     <div class="item orderFirst">third</div>
     <div class="item">fourth</div>
     <div class="item orderFirst">fifth</div>
     <div class="item">Six</div>
     <div class="item orderFirst">Seven</div>
    </div>

    <style>
    .mainWrap {display:flex; flex-direction: column;}
    .mainWrap .item {order:2; border-bottom:1px solid #ccc}
    .mainWrap .item:last-of-type {border-bottom:none;}
    .mainWrap .item.orderFirst {order:1;}
    </style>
Tags:

3

Answers


  1. 0

    You could reverse your borders like this:

    .item {
  order: 2; // this seems wrong by the way
  border-top: 1px solid #ccc; // set the TOP border on every .item
}

.item.orderFirst {
  order: 1;
  border-top: none; // unset it for the (visually) first element
}

    If your actual use-case is as simple as the example, this should give you what you want.

    Login or Signup to reply.
  2. 0

    You mean to delete the border of the last visible element and not the last element of the div container mainWrap, right?

    .mainWrap {display:flex; flex-direction: column;}
.mainWrap > div { order:2; border-bottom: 1px solid #ccc }
.mainWrap > div:nth-last-child(2) { border-bottom:none; }
.mainWrap > div:last-child { order:1; background: red;}
     <div class="mainWrap">
     <div class="item">first</div>
     <div class="item">second</div>
     <div class="item">third</div>
     <div class="item">fourth</div>
     <div class="item orderFirst">fifth</div>
 </div>
    Login or Signup to reply.
  3. 0

    If you’re really determined to do it like this, you can use javascript to find the last element that doesn’t have the orderFirst class and style that. This does seem like a mis-use of the order property, though.

    const mainWrap = document.querySelector(".mainWrap");

const children = [...mainWrap.children];
const ordered = children.filter((c) => !c.classList.contains("orderFirst"));

const last = ordered.pop();
last.style.setProperty("border-bottom", "none");
    .mainWrap {
  display: flex;
  flex-direction: column;
}

.item {
  order: 2;
  border-bottom:1px solid #ccc;
}

.item.orderFirst {
  order: 1;
}
    <div class="mainWrap">
  <div class="item">first</div>
  <div class="item">second</div>
  <div class="item orderFirst">third</div>
  <div class="item">fourth</div>
  <div class="item orderFirst">fifth</div>
  <div class="item">Six</div>
  <div class="item orderFirst">Seven</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search