How to add div after 3 rows in Joomla intro_items - joomla3.0

Question

I'm working on adding this to the com_content blog.php override.
Where we have the intro_items I need to have it count through 3 articles and then add a div where I can drop an ad script and than have it carry on and load the remaining 7 articles.
This is the intro_items loop. In parameters I have it set to 10 articles
<?php
$introcount = count($this->intro_items);
$counter = 0;
?>
<?php if (!empty($this->intro_items)) : ?>
<?php foreach ($this->intro_items as $key => &$item) : ?>
<?php $rowcount = ((int) $key % (int) $this->columns) + 1; ?>
<?php if ($rowcount === 1) : ?>
<?php $row = $counter / $this->columns; ?>
<div class="items-row cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row-fluid clearfix">
<?php endif; ?>
<div class="span<?php echo round(12 / $this->columns); ?>">
<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
</div>
<!-- end item -->
<?php $counter++; ?>
</div><!-- end span -->
<?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>
</div><!-- end row -->
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
I came up with the following, which works, but would like an opinion if there is a better way to do this.
<?php
$introcount = count($this->intro_items);
$counter = 0;
?>
<?php if (!empty($this->intro_items)) : ?>
<?php foreach ($this->intro_items as $key => &$item) : ?>
<?php $rowcount = ((int) $key % (int) $this->columns) + 1; ?>
<?php if ($rowcount === 1) : ?>
<?php $row = $counter / $this->columns; ?>
<div class="items-row cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row-fluid clearfix">
<?php endif; ?>
<?php if ($row != 2) : ?>
<div class="span<?php echo round(12 / $this->columns); ?>">
<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
</div>
<?php endif; ?>
<?php if ($row === 2) : ?>
<div class="span<?php echo round(12 / $this->columns); ?>">
<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<?php
$this->item = &$item;
echo $this->loadTemplate('item');
?>
<!-- mobile ad banner zone -->
<div class="cat-banner bannerzonepadding visible-phone">
<script type="text/javascript" language="javascript" src="http://myadsrc.demo"></script>
</div>
</div>
<?php endif; ?>
<!-- end item -->
<?php $counter++; ?>
</div><!-- end span -->
<?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>
</div><!-- end row -->
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>

Answer 1

Would this approach work?
you add an ID to a wrapper around your list of intro_items
use jQuery and CSS nth-child selector to target the third child in the intro_items list
then use jQuery .after() function to insert the HTML for your ad
Pseudo code
$("#intro_items_wrapper .items-row:nth-child(3)").after('<!-- mobile ad code here -->');
Actual code
$("#intro_items_wrapper .items-row:nth-child(3)").after('<!-- mobile ad banner zone -->
<div class="cat-banner bannerzonepadding visible-phone">
<script type="text/javascript" language="javascript" src="http://myadsrc.demo"></script>
</div>');
Here's a working demo:
https://codepen.io/panchroma/pen/EEwaQX
Good luck!