jquery - 将可见元素移动到索引的开头-6ren

jquery - 将可见元素移动到索引的开头

转载作者：行者123 更新时间：2023-11-27 22:58:19

我有一个绝对定位在图像中的元素列表。我创建了一个过滤器来隐藏/显示元素，这是有效的，但我想将显示的元素移动到容器中的第一个子项，否则当过滤器被删除时以前的元素“消失”时，只会有空白 active 。如果我能够做到这一点，我可以使用 CSS 根据 :first-of-type、:nth-of-type(2) 等定义绝对位置——这样第一个 child 总是位于我想要的位置.

代码是:

$(".trigger-filter").click(function() {
  var filterData = $(this).attr("data-filter");
  if (filterData == "all") {
    $(".team").show("2000");
  } else {
    $(".team").not("." + filterData).hide("2000");
    $(".team").filter("." + filterData).show("2000");
  }
});

HTML:

<div class="team-filters">
  <div class="trigger-filter" data-filter="tarya-fintech">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-610.png">
  </div>
  <div class="trigger-filter" data-filter="management">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-104-1.png">
  </div>
  <div class="trigger-filter" data-filter="marketing">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-57-2.png">
  </div>
  <div class="trigger-filter" data-filter="legal">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-184-1.png">
  </div>
  <div class="trigger-filter" data-filter="tarya-holding">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-73.png">
  </div>
  <div class="trigger-filter" data-filter="finance">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-56-1.png">
  </div>
  <div class="trigger-filter" data-filter="underwriting">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-95-1.png">
  </div>
  <div class="trigger-filter" data-filter="back-office">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-183-1.png">
  </div>
  <div class="trigger-filter" data-filter="customer-service">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-103-1.png">
  </div>
  <div class="trigger-filter" data-filter="customer-success">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-72-1.png">
  </div>
  <div class="trigger-filter" data-filter="collection">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-185-2.png">
  </div>
  <div class="trigger-filter" data-filter="business-development">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-182-1.png">
  </div>
  <div class="trigger-filter" data-filter="tarya-ukraine">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-545.png">
  </div>
  <div class="trigger-filter" data-filter="all">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-72222222.png">
  </div>
</div>
<div class="team-body">
  <div class="team-image">
    <img class="desktop-img" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/clean.png">
  </div>


  <div class="team eran-yogev tarya-fintech">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-fintech">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-ukraine">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-ukraine">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev collection">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev collection">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev customer-success">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev back-office">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev underwriting">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev finance">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev finance">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-holding">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev legal">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev legal">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev marketing">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev management">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
</div>

CSS:

  .team-body {
    position: relative;
  }

  .team-filters img {
    background: #dbdbdb;
    filter: grayscale(100%);
    border-radius: 100%;
    width: 90%;
    height: 90%;
    margin: 0 auto;
  }

  .team-filters {
    margin-bottom: 50px;
  }

  .checked-circle {
    filter: none !important;
  }


  .team-image {
    position: relative;
  }

  .team-image img {
    width: 100%;
  }

  .team-picture {
    border-radius: 100%;
    position: relative;
  }


  .team,
  .team-cat {
    position: absolute;
    z-index: 9999;
  }

  .eran-yogev {
    top: 0.4%;
    left: 44.4%;
    width: 8.5%;
  }

  .shlomi-frenkel {
    top: 0.2%;
    left: 62.4%;
    width: 11%;
  }

  .roy-shenbaum {
    top: 3.6%;
    left: 53.1%;
    width: 9.4%;
  }

  .giora-olmert {
    top: 4.95%;
    left: 41.4%;
    width: 11%;
  }

  .iris-keret {
    top: 6.75%;
    left: 16.6%;
    width: 9.4%;
  }

  .tamar-levine {
    top: 2.3%;
    left: 73.2%;
    width: 12.6%;
  }

  .mikhail-geoui {
    top: 7.75%;
    left: 28.6%;
    width: 11%;
  }

  .elyah-salomon {
    top: 11.95%;
    left: 7%;
    width: 9.4%;
  }

  .nitzan-alcobi {
    top: 10.4%;
    left: 43%;
    width: 15.1%;
  }

  .bianca-meger {
    top: 16.55%;
    left: 19.5%;
    width: 14.1%;
  }

  .tal-rave {
    top: 8.35%;
    left: 68%;
    width: 10.4%;
  }

  .liav-david {
    top: 22%;
    left: 41.4%;
    width: 9.4%;
  }

  .eliad-zefania {
    top: 25.65%;
    left: 26%;
    width: 11%;
  }

  .avner-erez {
    top: 16.5%;
    left: 37%;
    width: 11%;
  }

  .assaf-shlush {
    top: 27.6%;
    left: 14.9%;
    width: 9.4%;
  }

  .liran-brecher {
    top: 25.6%;
    left: 69.2%;
    width: 9.4%;
  }

  .shahaf-erlich {
    top: 27.3%;
    left: 45.9%;
    width: 11.5%;
  }

  .arnon-lempert {
    top: 14.3%;
    left: 71%;
    width: 11%;
  }

  .ron-nitzan {
    top: 32.9%;
    left: 52%;
    width: 9.4%;
  }

  .shay-butbul {
    top: 30.1%;
    left: 75.7%;
    width: 9.4%;
  }

  .iris-yogev {
    top: 29.7%;
    left: 88.55%;
    width: 9.4%;
  }

  .limor-baranes {
    top: 35.5%;
    left: 15.3%;
    width: 9.4%;
  }

  .liat-raz-rubin {
    top: 33%;
    left: 2.3%;
    width: 9.4%;
  }

  .eyal-elhayany {
    top: 32.35%;
    left: 37.7%;
    width: 12.4%;
  }

  .varda-lusthaus {
    top: 33%;
    left: 62.6%;
    width: 13.2%;
  }

  .keren-stern-avnon {
    top: 28.9%;
    left: 61.25%;
    width: 7.8%;
  }

  .liran-ram-arviv {
    top: 34.9%;
    left: 77.4%;
    width: 9.4%;
  }

  .itay-ram {
    top: 34.5%;
    left: 88.9%;
    width: 9.4%;
  }

  .michal-moses {
    top: 38.15%;
    left: 24.5%;
    width: 14.1%;
  }

  .alice-lachnish {
    top: 38.3%;
    left: 40.2%;
    width: 9.4%;
  }

  .dan-wagner {
    top: 44%;
    left: 16.6%;
    width: 9.4%;
  }

  .kobi-moshe {
    top: 45.8%;
    left: 28.7%;
    width: 11%;
  }

  .natali-haziza {
    top: 51.4%;
    left: 69.1%;
    width: 11%;
  }

  .david-eskenazi {
    top: 43.6%;
    left: 41.3%;
    width: 11%;
  }

  .sharon-kraus {
    top: 57.9%;
    left: 71.3%;
    width: 14.1%;
  }

  .limor-levinstein {
    top: 43.4%;
    left: 82.6%;
    width: 11%;
  }

  .efrat-biber {
    top: 59.2%;
    left: 1%;
    width: 16.2%;
  }

  .esti-barkish {
    top: 50.1%;
    left: 7%;
    width: 9.4%;
  }

  .zivit-ruderfer {
    top: 63.75%;
    left: 26%;
    width: 11%;
  }

  .noam-rubin-levi {
    top: 55.2%;
    left: 37%;
    width: 11%;
  }

  .keren-katz {
    top: 60.6%;
    left: 41.3%;
    width: 9.4%;
  }

  .mor-swisa {
    top: 67.3%;
    left: 58.3%;
    width: 9.4%;
  }

  .yana-david {
    top: 64.4%;
    left: 67.7%;
    width: 9.4%;
  }

  .daniel-mor-benisho {
    top: 65.3%;
    left: 15.1%;
    width: 9.4%;
  }

  .rachel-kashkash {
    top: 66.9%;
    left: 0%;
    width: 13.8%;
  }

  .hen-zehavi {
    top: 68.9%;
    left: 88.2%;
    width: 9.4%;
  }

  .magali-schuvaks {
    top: 66.8%;
    left: 78%;
    width: 8.1%;
  }

  .bianca-meger-33 {
    top: 75.8%;
    left: 52.7%;
    width: 13.7%;
  }

  .boris-pavlov {
    top: 73.8%;
    left: 87.1%;
    width: 11%;
  }

  .sapir-avraham {
    top: 71.5%;
    left: 79%;
    width: 7.3%;
  }

  .ifat-cohen {
    top: 81.3%;
    left: 18.65%;
    width: 11%;
  }

  .hila-manor {
    top: 72.5%;
    left: 68.6%;
    width: 7.8%;
  }

  .shimon-sabag {
    top: 75.7%;
    left: 55.7%;
    width: 11%;
  }

  .nofar-michaeli {
    top: 71.4%;
    left: 53.3%;
    width: 7.8%;
  }

  .hadar-tamarkin {
    top: 81.2%;
    left: 69.7%;
    width: 9.4%;
  }

  .perl-amichai {
    top: 72%;
    left: 42.3%;
    width: 9.4%;
  }

  .dana-kopelman-haim {
    top: 74.4%;
    left: 0%;
    width: 11.1%;
  }

  .rostyslav-diachenko {
    top: 87%;
    left: 5.9%;
    width: 11%;
  }

  .yair-ben-david {
    top: 76.9%;
    left: 39.6%;
    width: 13.8%;
  }

  .max-tokarev {
    top: 86%;
    left: 59.1%;
    width: 16.4%;
  }

  .yaniv-komemi {
    top: 80%;
    left: 0%;
    width: 14.4%;
  }

  .vitaliy-shkurenko {
    top: 87.1%;
    left: 84.2%;
    width: 13.9%;
  }

  .nati-kamhazi {
    top: 81.2%;
    left: 53.3%;
    width: 11.1%;
  }

  .oleh-osyka {
    top: 91.35%;
    left: 20.2%;
    width: 14.1%;
  }

  .vladyslav-martynov {
    top: 93%;
    left: 36.95%;
    width: 11.1%;
  }

  .nitzan-zeev {
    top: 57%;
    left: 50%;
    width: 9.4%;
  }

  .roy-mor {
    top: 76%;
    left: 29%;
    width: 7.8%;
  }

  .frider-drorit {
    top: 70.3%;
    left: 16.2%;
    width: 9.4%;
  }

  .bar-dayan {
    top: 42.9%;
    left: 54.6%;
    width: 9.4%;
  }

  .talya-sharamy {
    top: 45.8%;
    left: 69.9%;
    width: 9.4%;
  }

  .miki-ishai {
    top: 10%;
    left: 81%;
    width: 9.4%;
  }

  .andrey-pirogov {
    top: 5%;
    left: 88.3%;
    width: 11.1%;
  }

  .gadi-sade {
    top: 13.9%;
    left: 88.9%;
    width: 11%;
  }

  .ivo-segora {
    top: 5.5%;
    left: 0%;
    width: 13.5%;
  }

  .nitza-kaminsky {
    top: 70%;
    left: 27.5%;
    width: 11.1%;
  }

  .ofir-fouks {
    top: 86%;
    left: 76.4%;
    width: 7.4%;
  }


  .eran-yogev .team-overlay,
  .mikhail-geoui .team-overlay,
  .nitzan-alcobi .team-overlay,
  .avner-erez .team-overlay,
  .arnon-lempert .team-overlay,
  .eliad-zefania .team-overlay,
  .eyal-elhayany .team-overlay,
  .alice-lachnish .team-overlay,
  .keren-stern-avnon .team-overlay,
  .kobi-moshe .team-overlay,
  .noam-rubin-levi .team-overlay,
  .natali-haziza .team-overlay,
  .efrat-biber .team-overlay,
  .zivit-ruderfer .team-overlay,
  .perl-amichai .team-overlay,
  .hila-manor .team-overlay,
  .yaniv-komemi .team-overlay,
  .max-tokarev .team-overlay,
  .gadi-sade .team-overlay,
  .frider-drorit .team-overlay {
    background: rgba(105, 215, 222, 0.5);
  }

  .roy-shenbaum .team-overlay,
  .tal-rave .team-overlay,
  .bianca-meger .team-overlay,
  .shahaf-erlich .team-overlay,
  .liat-raz-rubin .team-overlay,
  .iris-yogev .team-overlay,
  .liran-ram-arviv .team-overlay,
  .rachel-kashkash .team-overlay,
  .sapir-avraham .team-overlay,
  .yair-ben-david .team-overlay,
  .hadar-tamarkin .team-overlay,
  .ifat-cohen .team-overlay,
  .vladyslav-martynov .team-overlay,
  .ivo-segora .team-overlay,
  .bar-dayan .team-overlay,
  .talya-sharamy .team-overlay {
    background: rgba(135, 40, 140, 0.5);
  }

  .tamar-levine .team-overlay,
  .assaf-shlush .team-overlay,
  .liran-brecher .team-overlay,
  .itay-ram .team-overlay,
  .yana-david .team-overlay,
  .daniel-mor-benisho .team-overlay,
  .nati-kamhazi .team-overlay,
  .vitaliy-shkurenko .team-overlay,
  .miki-ishai .team-overlay,
  .nitza-kaminsky .team-overlay,
  .roy-mor .team-overlay,
  .ofir-fouks .team-overlay {
    background: rgba(128, 128, 128, 0.25);
  }


  @media (max-width: 767px) {

    .team-filters {
      border-bottom: 1px solid #cacaca;
      display: block !important;
    }

    .team-image,
    .team-cat,
    .circle {
      display: none;
    }

    .all-of-them {
      background: url(http://outofsite.co.il/traya/wp-content/uploads/2019/11/Android-Mobile-–-7-1.jpg);
      height: 5200px;
      width: 100%;
      position: relative;
      background-repeat: repeat;
      background-size: 100%;
    }

    .rtl .team-role,
    .rtl .team-role .en {
      font-size: 13px;
      line-height: 1;
      margin-top: 5px;
    }

    .team-role,
    .team-role .en {
      font-size: 11px;
      line-height: 1;
      margin-top: 5px;
    }

    .team:first-child,
    .team:nth-child(8n+1) {
      width: 19%;
      left: 27%;
    }

    .team:nth-child(2),
    .team:nth-child(8n+2) {
      width: 27%;
      left: 50%;
    }

    .team:nth-child(3),
    .team:nth-child(8n+3) {
      width: 27%;
      left: 20%;
    }

    .team:nth-child(4),
    .team:nth-child(8n+4) {
      width: 27%;
      left: 49%;
    }

    .team:nth-child(5),
    .team:nth-child(8n+5) {
      width: 25%;
      left: 26%;
    }

    .team:nth-child(6),
    .team:nth-child(8n+6) {
      width: 20%;
      left: 57%;
    }

    .team:nth-child(7),
    .team:nth-child(8n+7) {
      width: 31%;
      left: 25%;
    }

    .team:nth-child(8),
    .team:nth-child(8n+8) {
      width: 22%;
      left: 60%;
    }

    .team:first-of-type {
      top: 13px;
    }

    .team:nth-of-type(2) {
      top: 45px;
    }

    .team:nth-of-type(3) {
      top: 125px;
    }

    .team:nth-of-type(4) {
      top: 185px;
    }

    .team:nth-of-type(5) {
      top: 260px;
    }

    .team:nth-of-type(6) {
      top: 345px;
    }

    .team:nth-of-type(7) {
      top: 390px;
    }

    .team:nth-of-type(8) {
      top: 460px;
    }

    .team:nth-of-type(9) {
      top: 533px;
    }

    .team:nth-of-type(10) {
      top: 565px;
    }

    .team:nth-of-type(11) {
      top: 645px;
    }

    .team:nth-of-type(12) {
      top: 705px;
    }

    .team:nth-of-type(13) {
      top: 780px;
    }

    .team:nth-of-type(14) {
      top: 865px;
    }

    .team:nth-of-type(15) {
      top: 910px;
    }

    .team:nth-of-type(16) {
      top: 980px;
    }

    .team:nth-of-type(17) {
      top: 1053px;
    }

    .team:nth-of-type(18) {
      top: 1085px;
    }

    .team:nth-of-type(19) {
      top: 1165px;
    }

    .team:nth-of-type(20) {
      top: 1225px;
    }

    .team:nth-of-type(21) {
      top: 1300px;
    }

    .team:nth-of-type(22) {
      top: 1385px;
    }

    .team:nth-of-type(23) {
      top: 1430px;
    }

    .team:nth-of-type(24) {
      top: 1500px;
    }

    .team:nth-of-type(25) {
      top: 1573px;
    }

    .team:nth-of-type(26) {
      top: 1605px;
    }

    .team:nth-of-type(27) {
      top: 1685px;
    }

    .team:nth-of-type(28) {
      top: 1745px;
    }

    .team:nth-of-type(29) {
      top: 1820px;
    }

    .team:nth-of-type(30) {
      top: 1905px;
    }

    .team:nth-of-type(31) {
      top: 1950px;
    }

    .team:nth-of-type(32) {
      top: 2020px;
    }

    .team:nth-of-type(33) {
      top: 2093px;
    }

    .team:nth-of-type(34) {
      top: 2135px;
    }

    .team:nth-of-type(35) {
      top: 2205px;
    }

    .team:nth-of-type(36) {
      top: 2265px;
    }

    .team:nth-of-type(37) {
      top: 2340px;
    }

    .team:nth-of-type(38) {
      top: 2425px;
    }

    .team:nth-of-type(39) {
      top: 2470px;
    }

    .team:nth-of-type(40) {
      top: 2540px;
    }

    .team:nth-of-type(41) {
      top: 2613px;
    }

    .team:nth-of-type(42) {
      top: 2645px;
    }

    .team:nth-of-type(43) {
      top: 2725px;
    }

    .team:nth-of-type(44) {
      top: 2785px;
    }

    .team:nth-of-type(45) {
      top: 2860px;
    }

    .team:nth-of-type(46) {
      top: 2945px;
    }

    .team:nth-of-type(47) {
      top: 2990px;
    }

    .team:nth-of-type(48) {
      top: 3060px;
    }

    .team:nth-of-type(49) {
      top: 3133px;
    }

    .team:nth-of-type(50) {
      top: 3165px;
    }

    .team:nth-of-type(51) {
      top: 3245px;
    }

    .team:nth-of-type(52) {
      top: 3305px;
    }

    .team:nth-of-type(53) {
      top: 3380px;
    }

    .team:nth-of-type(54) {
      top: 3465px;
    }

    .team:nth-of-type(55) {
      top: 3510px;
    }

    .team:nth-of-type(56) {
      top: 3580px;
    }

    .team:nth-of-type(57) {
      top: 3653px;
    }

    .team:nth-of-type(58) {
      top: 3685px;
    }

    .team:nth-of-type(59) {
      top: 3765px;
    }

    .team:nth-of-type(60) {
      top: 3825px;
    }

    .team:nth-of-type(61) {
      top: 3900px;
    }

    .team:nth-of-type(62) {
      top: 3985px;
    }

    .team:nth-of-type(63) {
      top: 4030px;
    }

    .team:nth-of-type(64) {
      top: 4100px;
    }

    .team:nth-of-type(65) {
      top: 4173px;
    }

    .team:nth-of-type(66) {
      top: 4205px;
    }

    .team:nth-of-type(67) {
      top: 4285px;
    }

    .team:nth-of-type(68) {
      top: 4345px;
    }

    .team:nth-of-type(69) {
      top: 4420px;
    }

    .team:nth-of-type(70) {
      top: 4505px;
    }

    .team:nth-of-type(71) {
      top: 4550px;
    }

    .team:nth-of-type(72) {
      top: 4620px;
    }

    .team:nth-of-type(73) {
      top: 4693px;
    }

    .team:nth-of-type(74) {
      top: 4725px;
    }

    .team:nth-of-type(75) {
      top: 4805px;
    }


    .trigger-filter[data-filter='tarya-fintech'] img.checked-circle,
    .trigger-filter[data-filter='marketing'] img.checked-circle,
    .trigger-filter[data-filter='legal'] img.checked-circle,
    .trigger-filter[data-filter='collection'] img.checked-circle {
      background: #03b9c4;
    }

    .trigger-filter[data-filter='all'] img.checked-circle,
    .trigger-filter[data-filter='customer-success'] img.checked-circle,
    .trigger-filter[data-filter='back-office'] img.checked-circle {
      background: #86278b;
    }

    .trigger-filter[data-filter='management'] img.checked-circle,
    .trigger-filter[data-filter='finance'] img.checked-circle {
      background: #b1e6ea;
    }

    .trigger-filter[data-filter='tarya-ukraine'] img.checked-circle,
    .trigger-filter[data-filter='business-development'] img.checked-circle,
    .trigger-filter[data-filter='customer-service'] img.checked-circle,
    .trigger-filter[data-filter='underwriting'] img.checked-circle,
    .trigger-filter[data-filter='tarya-holding'] img.checked-circle {
      background: #4e4d4b;
    }

  }


  @media (min-width: 400px) and (max-width: 767px) {

    .team:first-of-type(1) {
      top: 13px !important;
    }

    .team:nth-of-type(2) {
      top: 55px !important;
    }

    .team:nth-of-type(3) {
      top: 135px !important;
    }

    .team:nth-of-type(4) {
      top: 205px !important;
    }

    .team:nth-of-type(5) {
      top: 290px !important;
    }

    .team:nth-of-type(6) {
      top: 380px !important;
    }

    .team:nth-of-type(7) {
      top: 430px !important;
    }

    .team:nth-of-type(8) {
      top: 510px !important;
    }

    .team:nth-of-type(9) {
      top: 586px !important;
    }

    .team:nth-of-type(10) {
      top: 628px !important;
    }

    .team:nth-of-type(11) {
      top: 708px !important;
    }

    .team:nth-of-type(12) {
      top: 778px !important;
    }

    .team:nth-of-type(13) {
      top: 863px !important;
    }

    .team:nth-of-type(14) {
      top: 953px !important;
    }

    .team:nth-of-type(15) {
      top: 1003px !important;
    }

    .team:nth-of-type(16) {
      top: 1083px !important;
    }

    .team:nth-of-type(17) {
      top: 1159px !important;
    }

    .team:nth-of-type(18) {
      top: 1201px !important;
    }

    .team:nth-of-type(19) {
      top: 1281px !important;
    }

    .team:nth-of-type(20) {
      top: 1351px !important;
    }

    .team:nth-of-type(21) {
      top: 1436px !important;
    }

    .team:nth-of-type(22) {
      top: 1526px !important;
    }

    .team:nth-of-type(23) {
      top: 1576px !important;
    }

    .team:nth-of-type(24) {
      top: 1656px !important;
    }

    .team:nth-of-type(25) {
      top: 1732px !important;
    }

    .team:nth-of-type(26) {
      top: 1774px !important;
    }

    .team:nth-of-type(27) {
      top: 1854px !important;
    }

    .team:nth-of-type(28) {
      top: 1924px !important;
    }

    .team:nth-of-type(29) {
      top: 2009px !important;
    }

    .team:nth-of-type(30) {
      top: 2099px !important;
    }

    .team:nth-of-type(31) {
      top: 2149px !important;
    }

    .team:nth-of-type(32) {
      top: 2229px !important;
    }

    .team:nth-of-type(33) {
      top: 2305px !important;
    }

    .team:nth-of-type(34) {
      top: 2347px !important;
    }

    .team:nth-of-type(35) {
      top: 2427px !important;
    }

    .team:nth-of-type(36) {
      top: 2497px !important;
    }

    .team:nth-of-type(37) {
      top: 2582px !important;
    }

    .team:nth-of-type(38) {
      top: 2672px !important;
    }

    .team:nth-of-type(39) {
      top: 2722px !important;
    }

    .team:nth-of-type(40) {
      top: 2802px !important;
    }

    .team:nth-of-type(41) {
      top: 2878px !important;
    }

    .team:nth-of-type(42) {
      top: 2920px !important;
    }

    .team:nth-of-type(43) {
      top: 3000px !important;
    }

    .team:nth-of-type(44) {
      top: 3070px !important;
    }

    .team:nth-of-type(45) {
      top: 3155px !important;
    }

    .team:nth-of-type(46) {
      top: 3245px !important;
    }

    .team:nth-of-type(47) {
      top: 3295px !important;
    }

    .team:nth-of-type(48) {
      top: 3375px !important;
    }

    .team:nth-of-type(49) {
      top: 3451px !important;
    }

    .team:nth-of-type(50) {
      top: 3493px !important;
    }

    .team:nth-of-type(51) {
      top: 3573px !important;
    }

    .team:nth-of-type(52) {
      top: 3643px !important;
    }

    .team:nth-of-type(53) {
      top: 3728px !important;
    }

    .team:nth-of-type(54) {
      top: 3818px !important;
    }

    .team:nth-of-type(55) {
      top: 3868px !important;
    }

    .team:nth-of-type(56) {
      top: 3948px !important;
    }

    .team:nth-of-type(57) {
      top: 4024px !important;
    }

    .team:nth-of-type(58) {
      top: 4066px !important;
    }

    .team:nth-of-type(59) {
      top: 4146px !important;
    }

    .team:nth-of-type(60) {
      top: 4216px !important;
    }

    .team:nth-of-type(61) {
      top: 4301px !important;
    }

    .team:nth-of-type(62) {
      top: 4391px !important;
    }

    .team:nth-of-type(63) {
      top: 4441px !important;
    }

    .team:nth-of-type(64) {
      top: 4521px !important;
    }

    .team:nth-of-type(65) {
      top: 4597px !important;
    }

    .team:nth-of-type(66) {
      top: 4639px !important;
    }

    .team:nth-of-type(67) {
      top: 4719px !important;
    }

    .team:nth-of-type(68) {
      top: 4789px !important;
    }

    .team:nth-of-type(69) {
      top: 4874px !important;
    }

    .team:nth-of-type(70) {
      top: 4964px !important;
    }

    .team:nth-of-type(71) {
      top: 5014px !important;
    }

    .team:nth-of-type(72) {
      top: 5094px !important;
    }

    .team:nth-of-type(73) {
      top: 5170px !important;
    }

    .team:nth-of-type(74) {
      top: 5212px !important;
    }

    .team:nth-of-type(75) {
      top: 5292px !important;
    }


    .all-of-them {
      height: 5450px;
    }



    .team:nth-child(2),
    .team:nth-child(8n+2) {
      width: 27%;
      left: 52%;
    }

    .team:nth-child(4),
    .team:nth-child(8n+4) {
      width: 27%;
      left: 57%;
    }

    .team:nth-child(6),
    .team:nth-child(8n+6) {
      width: 20%;
      left: 58%;
    }

    .team:nth-child(8),
    .team:nth-child(8n+8) {
      width: 22%;
      left: 60%;
    }

    .team:first-child,
    .team:nth-child(8n+1) {
      width: 19%;
      left: 26%;
    }

    .team:nth-child(3),
    .team:nth-child(8n+3) {
      width: 27%;
      left: 19%;
    }

    .team:nth-child(7),
    .team:nth-child(8n+7) {
      width: 31%;
      left: 24%;
    }



  }

有什么想法可以完成吗？

最佳答案

您的绝对位置属性是 left和 top .因此，您将知道 top 的最小可能值是多少和 left .定义一个 topInitial , leftInitial , topOffset和一个 leftOffset包含初始值和 top 之间的差值的变量和 left要显示的两个后续元素。现在，假设您有一个 visibleElements保存要显示的元素的变量。在这种情况下，您可以使用此算法:

var currentTop = initialTop;
var currentLeft = initialLeft;
var current
for (var visibleElement of visibleElements) {
    visibleElement.css('left', currentLeft + 'px').css('top', currentTop + 'px');
    currentLeft += leftOffset;
    currentTop += topOffset;
}

关于jquery - 将可见元素移动到索引的开头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59124244/

文章推荐： c++ - 从 unordered_map 中删除值的有效方法，当只给出值 C++

文章推荐： c# - 如何在按钮单击时调用异步？

文章推荐： javascript - 获取视口(viewport)中元素位置的百分比

文章推荐： c++ - 访问迭代器值导致段错误 11

html - 移动 HTML5 框架 - Jquery 移动
只是想知道 Jquery Mobile 是否足够稳定以用于实时生产企业移动应用程序。有很多 HTML5 框架，因为我们的团队使用 JQuery 已经有一段时间了，我们更愿意使用 Jquery 移动框
node.js - PUBG 移动 api - 是否存在任何返回用户信息的 pubg 移动 api
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 3 年前。 Improve t
javascript - javascript 中的拖放 - 元素可以按 x 移动，但不能按 y 移动？
所以我尝试在 JavaScript 中对元素进行拖放。我使用的视频教程在这里； https://www.youtube.com/watch?v=KTlZ4Hs5h80 。我已经按照它的说明进行了编码，
javascript - 移动 iOS 设备(移动 Chrome 和 Safari)上的 mp3 音频缓存问题
无法在移动 iOS(safari 和 chrome)上自动播放以前缓存的 mp3 音频我正在 Angular 8 中开发一个应用程序，在该应用程序的一部分中，我试图在对象数组中缓存几个传入的音频 m
Git如何检测整个文件夹已删除/移动
Git 基于内容而不是文件，所以我目前理解以下行为，但我想知道是否有特殊选项或 hack 来检测此类事情: git init mkdir -p foo/bar echo "test" foo/a.tx
移动 View 的语义ui隐藏元素
我正在寻找语义 ui 正确的类来隐藏例如移动 View 中的 DIV。在 Bootstrap 中，我们有“visible-xs”和“hidden-xs”。但是在语义ui上我只找到了“仅移动网格” 最
linux - 移动，复制文件而不使用太多内存
我正在使用 ubuntu 和想要移动或复制大文件。但是当我与其他人一起使用服务器时，我不想拥有所有内存并使其他进程几乎停止。那么有没有办法在内存使用受限的情况下移动或复制文件？最佳答案如果你
集会？ LD & 移动
这些指令有什么区别？以 ARM9 处理器为例，它不应该是: ASM: mov r0, 0 C: r0 = 0; ASM: ld r0, 0 C: r0 = 0; ? 我不知道为什么要使用一个或另一个:
php - 移动/复制和重命名最近修改的文件
我有一个文件夹，其中包含一些随机命名的文件，其中包含我需要的数据。为了使用数据，我必须将文件移动到另一个文件夹并将文件命名为“file1.xml” 每次移动和重命名文件时，它都会替换目标文件夹中以前
xcode - 移动 Storyboard中其他对象后面的对象
我经常在 IB/Storyboard 中堆叠对象，几乎不可能拖动其他对象后面的对象而不移动前面的对象。无论如何我可以移动已经选择但位于其他对象后面的对象吗？当我尝试移动它时，它总是选择顶部的对象，还是
移动 Safari 推送通知
几个月前，我看到 Safari 7 允许推送通知，它似乎是一个非常有用的工具，除了我看到的每个示例都专注于桌面浏览，而不是移动设备。 Safari 推送通知是否可以在移动设备上运行，如果没有，是否有计
c# - 移动/调整窗口大小时任务被阻止
我有一个简单的 View 模型，其中包含修改后的 ObservableCollection使用 SynchronizationContext.Current.Send在 UI 线程上执行对集合的更改。
Cassandra 移动 data_file_firectories
关于cassandra创建的数据文件和系统文件的位置，我需要移动在“cassandra.yaml”配置文件中设置的“commitlog_directory”、“data_file_directorie
javascript - 如何将浏览器选项卡标题设置为滚动/移动？
我有这个代码 $(function() { var message = 'Dont forget us'; var original; var txt1 = ' - '; $(wind
html - 页面底部奇怪的空白(移动)
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在基于 Android 的浏览器上加载时，页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
javascript - 移动|克隆元素并从原始位置删除
我有这个 HTML 标记: Express 300 bsf Sign Up 我需要将元素从 DOM 上的一个
uitableview - 确定表格单元格何时开始在可能的移动操作中拖动(移动)
我有一个可重新排序的 TableView (UITableView 实例)。尽管我已经实现了 UITableViewDataSource 方法: tableView:moveRowAtIndexPat
html - 页面底部奇怪的空白(移动)
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在基于 Android 的浏览器上加载时，页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
java - 如何区分importData中的复制/移动
我需要在拖放或复制/剪切和粘贴(复制与移动)期间获取操作类型。它是一个 Swing 应用程序，并且实现了 TransferHandle。我在操作结束时需要此信息，在 importData 方法中。对
java - 移动 ArrayList
我编写了一个具有 add 和 get 方法的 SortedIntList 类。我调用以下四个方法: SortedIntList mySortedIntList = new SortedIntList

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 将可见元素移动到索引的开头