title: Jquery index() doesn't find my element
body: <p>Today I've a small problem with jQuery .index() function.
  I've a list of div possessing the <strong>primaryContract</strong> class. Of of these div contains too the <strong>selected</strong> class.
  I want to receive the index of this selected element.
  I try a lot of manipulations but nothing works, the function returns only -1 (it's the fail return value of this function).</p>
  
  <p>Here is the part of concerned HTML:</p>
  
  <pre><code>&lt;div class="owl-carousel owl-loaded" rv-slide="context:stepHide" style="display: block;"&gt;
     &lt;!-- rivets: each-contract --&gt;
     &lt;div class="owl-stage-outer"&gt;
        &lt;div class="owl-stage" style="transition: 0s; width: 654px; transform: translate3d(218px, 0px, 0px);"&gt;
           &lt;div class="owl-item active center" style="width: 109px;"&gt;
              &lt;div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'"&gt;243992&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="owl-item active" style="width: 109px;"&gt;
              &lt;div class="primaryContract selected" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'"&gt;444444&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="owl-item active" style="width: 109px;"&gt;
              &lt;div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'"&gt;665441&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="owl-item" style="width: 109px;"&gt;
              &lt;div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'"&gt;243992&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="owl-item" style="width: 109px;"&gt;
              &lt;div class="primaryContract selected" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'"&gt;444444&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="owl-item" style="width: 109px;"&gt;
              &lt;div class="primaryContract" rv-text="contract:primaryContractReference" rv-value="contract:primaryContractReference" rv-addclass="context:primaryContract | eq contract:primaryContractReference | if 'selected'"&gt;665441&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my concerned JS:</p>
  
  <pre><code>initializeSelectedCarouselItem:function(){
          var items = $("div.primaryContract");
          var index = items.index('.selected');
          console.log(index);
  </code></pre>
  
  <p>Does someone see where made I the mistake ?</p>