title: get the nth-child number of an element in jquery
body: <p>I have a class of multiple 'DIV' elements and inside it are list of 'p' elements. See below:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;p&gt;This is content 1&lt;/p&gt;
      &lt;p&gt;This is content 2&lt;/p&gt;
      &lt;p&gt;This is content 3&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;p&gt;This is content 1&lt;/p&gt;
      &lt;p&gt;This is content 2&lt;/p&gt;
      &lt;p&gt;This is content 3&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my jQuery code on calling the 'p' elements through hover:</p>
  
  <pre><code>$('.container').children('p').hover(function(){
      //get the nth child of p from parent class 'container'
  });
  </code></pre>
  
  <p>How can I get the nth child number of the element 'p' from its parent container class 'container'?</p>
  
  <p>Like if you hover </p>
  
  <blockquote>
    <p>This is content 1</p>
  </blockquote>
  
  <p>it should trigger output as 1;</p>