Abayob Abayob - 7 months ago 8
Javascript Question

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

I am working on a CMS and to save my text, I need to know the index of the element I am working in.

I have the 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>

<!-- This one messes up the 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 are the ones that matter, the clearfix div is just there to fix the clearance.

When I edit some text, I trigger a change event on the text that has been changed, and thus getting the
this
from that element:

var that = $(this);


I then go up to the
.project
closest element en count the index:

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


But this of course also counts the
div.clearfix
.
I tried to resolve that by adding a selector to the index function:

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


But this still gave the wrong index.

Any ideas to get a correct count?

EDIT



I am giving you not enough information. The above HTML example is just 1 element in a page.
There can be multiple elements like the above, divided by a container, div etc..

What appears to be the case here is that when you enter a selector into the
index
-function, it searches the entire document for this selector and then returns the index of that set.

I tried to solve this by inserting a set of nodes into the index functions:

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


But this only returns -1

I created a workaround, but it's not what I was searching for:

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


If anyone has a correct way of using index here, please let me know!

Answer

You can call Array's indexOf on the article.projects elements and search for your specific one :

$(document).click(function(e) {
  // get your targeted element
  var target = $(e.target).closest('.project')[0];
  // call indexOf on the list of all article.project elements, searching for your one
  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 the `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>

  <!-- This one messes up the 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>

Comments