Hide repeating divs using jquery

<div class = "parent">
<div class="swatch-opt-115">
       <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">

       </div>
       <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
          <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">

       </div>
    </div>
    </div>

Is it possible to hide the repeating classes - class="swatch-attribute size", and class="swatch-attribute color" using jQuery? So only the first 2 will be visible rest will be hidden. Can someone help?

The 115 in classname swatch-opt-115 will be dynamic. swatch-attribute color, swatch-attribute size may change but it is sure that they will be repeating. The count may also vary. So we will need to find out the class name of the first child, and then find the repeating classes, and hide them.

Solution

Updated answer

If there are only 2 div elements that get repeated:

Use a query that matches the div elements which indexes are greater than 1 :gt(1) under the :first-child of your .parent elements,
Use the .hide() method.

$('.parent > div:first-child > div:gt(1)').hide();

.swatch-attribute.size {
  background: #faa;
}
.swatch-attribute.color {
  background: #aaf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="swatch-opt-115">
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 1</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 1</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 2</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 2</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 3</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 3</div>
    </div>
  </div>
</div>

Note that I also added the closing to make it work correctly.

Hope it helps.

⋅ ⋅ ⋅

Old answer

Here is a solution to show only the first elements:

Use of .hide() on all elements,
Use .show() on the .first() elements,
Plus, I added some colors and content to make the snippet more visual.

Snippet:

$(".swatch-attribute.size").hide().first().show();
$(".swatch-attribute.color").hide().first().show();

.swatch-attribute.size {
  background: #faa;
}
.swatch-attribute.color {
  background: #aaf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="swatch-opt-115">
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 1</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 1</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 2</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 2</div>
    </div>
    <div class="swatch-attribute size" attribute-code="size" attribute-id="141">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Size" class="swatch-attribute-options clearfix">size 3</div>
    </div>
    <div class="swatch-attribute color" attribute-code="color" attribute-id="93">
      <div aria-activedescendant="" tabindex="0" aria-invalid="false" aria-required="true" role="listbox" aria-label="Color" class="swatch-attribute-options clearfix">color 3</div>
    </div>
  </div>
</div>

Note that I also added the closing </div> to make it work correctly.

Hope it helps.