javascript - Getting the index of an HTML element but filtering out clearfix divs? -

i working on cms , save text, need know index of element working in.

i have following (stripped) piece of html:

<div class="row">     <article class="col-md-4 col-sm-4 project" >         <div class="inphos-hover-color-element5715e6986d561" >             <div>                 <div class="content dummy-content" data-content="title">vul hier uw titel in</div>                     <div class="content" data-content="text">                         <p>sdfas</p>                     </div>                 </div>             </div>     </article>     <article class="col-md-4 col-sm-4 project">         <div class="inphos-hover-color-element5715e6986d561" >             <div>                 <div class="content dummy-content" data-content="title">vul hier uw titel in</div>                     <div class="content" contenteditable="true" data-content="text">                         <p>asfdsad</p>                 </div>             </div>         </div>     </article>     <article class="col-md-4 col-sm-4 project">         <div class="inphos-hover-color-element5715e6986d561">             <div>                 <div class="content dummy-content" contenteditable="true" data-content="title">vul hier uw titel in</div>                 <div class="content" style="line-height:21px;" contenteditable="true" data-content="text">                     <p>asdfsd</p>                 </div>             </div>         </div>     </article>      <!-- 1 messes count -->     <div class="clearfix"></div>      <article class="col-md-4 col-sm-4 project" >         <div class="inphos-hover-color-element5715e6986d561">             <div >                 <div class="content dummy-content" contenteditable="true" data-content="title">vul hier uw titel in</div>                 <div class="content dummy-content" contenteditable="true" data-content="text">dummy text</div>             </div>         </div>     </article> </div> 

the articles ones matter, clearfix div there fix clearance.

when edit text, trigger change event on text has been changed, , getting this element:

var = $(this); 

i go .project closest element en count index:

that.closest('.project').index(); 

but of course counts div.clearfix. tried resolve adding selector index function:

that.closest('.project').index('.project'); 

but still gave wrong index.

any ideas correct count?

edit

i giving not enough information. above html example 1 element in page. there can multiple elements above, divided container, div etc..

what appears case here when enter selector index-function, searches entire document selector , returns index of set.

i tried solve inserting set of nodes index functions:

var project = that.closest('.project'); project.index(project.siblings('.project')); 

but returns -1

i created workaround, it's not searching for:

index = project.index() - project.prevall(':not(.project)').length; 

if has correct way of using index here, please let me know!

you can call array's indexof on article.projects elements , search specific 1 :

$(document).click(function(e) {    // targeted element    var target = $(e.target).closest('.project')[0];    // call indexof on list of article.project elements, searching 1    var index = array.prototype.indexof.call($('article.project'), target);      $('#log').html('clicked on ' + index);    })

#log{position: fixed; top:0; z-index: 99; background-color:rgba(0,0,0,.4); color:white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!-- provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>  <div class="row">    <article class="col-md-4 col-sm-4 project">      <div class="inphos-hover-color-element5715e6986d561">        <div>          <div class="content dummy-content" data-content="title">vul hier uw titel in</div>          <div class="content" data-content="text">            <p>sdfas</p>          </div>        </div>      </div>    </article>    <article class="col-md-4 col-sm-4 project">      <div class="inphos-hover-color-element5715e6986d561">        <div>          <div class="content dummy-content" data-content="title">vul hier uw titel in</div>          <div class="content" contenteditable="true" data-content="text">            <p>asfdsad</p>          </div>        </div>      </div>    </article>    <article class="col-md-4 col-sm-4 project">      <div class="inphos-hover-color-element5715e6986d561">        <div>          <div class="content dummy-content" contenteditable="true" data-content="title">vul hier uw titel in</div>          <div class="content" style="line-height:21px;" contenteditable="true" data-content="text">            <p>asdfsd</p>          </div>        </div>      </div>    </article>      <!-- 1 messes count -->    <div class="clearfix"></div>      <article class="col-md-4 col-sm-4 project">      <div class="inphos-hover-color-element5715e6986d561">        <div>          <div class="content dummy-content" contenteditable="true" data-content="title">vul hier uw titel in</div>          <div class="content dummy-content" contenteditable="true" data-content="text">dummy text</div>        </div>      </div>    </article>  </div>  <div id="log"></div>