Как запустить скрипт для каждого блока отдельно?

Question

Я хочу скрыть все теги "а" после 3-го в каждом meta-full отдельно. Но получается так что скрипт ставит класс hid всем элементам на странице полностью, кроме первых 3-х. Как объяснить скрипту, чтобы в каждом новом классе meta-full, он начинал отсчет с начала?

<div class="meta-full">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>


<div class="meta-full">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>

<div class="meta-full">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>

    $(".meta-full").ready(function () {
        max = 8;
        i = 0;
        $(".meta-full a").each(function() {
            i += 1;
            if(i > max) {
                $(this).addClass("hid");
            }
        })
    });

   .hid{
      display: none;
   }

Answer 1

$(".meta-full").each(function() {
    let max = 3;
    let i = 0;
    
    $(this).find("a").each(function() {
        i += 1;
        if (i > max) {
          $(this).addClass("hid");
        }
    })
});

.hid {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="meta-full">
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
  <a href="">5</a>
</div>


<div class="meta-full">
  <a href="">11</a>
  <a href="">22</a>
  <a href="">33</a>
  <a href="">44</a>
  <a href="">55</a>
</div>

<div class="meta-full">
  <a href="">111</a>
  <a href="">222</a>
  <a href="">333</a>
  <a href="">444</a>
</div>

Вариант короче:

$(".meta-full").each(function() {
    let max = 3;
    let i = 0;
    
    $(this).find(`a:nth-of-type(1n + ${max + 1})`).addClass("hid");
});

.hid {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="meta-full">
  <a href="">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
  <a href="">5</a>
</div>


<div class="meta-full">
  <a href="">11</a>
  <a href="">22</a>
  <a href="">33</a>
  <a href="">44</a>
  <a href="">55</a>
</div>

<div class="meta-full">
  <a href="">111</a>
  <a href="">222</a>
  <a href="">333</a>
  <a href="">444</a>
</div>

БЛОГ НА HUSL

Как запустить скрипт для каждого блока отдельно?

Ответы (1 шт):