javascript - 获取 HTML 元素的索引但过滤掉 clearfix div？

Question

我正在使用 CMS 并保存我的文本，我需要知道我正在使用的元素的索引。

我有以下(剥离的)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>

文章才是最重要的，clearfix div 只是用来修复间隙。

当我编辑一些文本时，我会在已更改的文本上触发更改事件，从而从该元素获取 this:

var that = $(this);

然后我转到 .project 最近的元素并计算索引:

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

但这当然也算上了div.clearfix。 我试图通过向索引函数添加一个选择器来解决这个问题:

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

但这仍然给出了错误的索引。

关于获得正确计数的任何想法？

编辑

我给你的信息不够。上面的 HTML 示例只是页面中的 1 个元素。 可以有多个像上面这样的元素，用容器、div等划分。

这里的情况似乎是，当您在 index 函数中输入一个选择器时，它会在整个文档中搜索该选择器，然后返回该集合的索引。

我试图通过在索引函数中插入一组节点来解决这个问题:

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

但这只返回-1

我创建了一个解决方法，但这不是我要搜索的:

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

如果有人在这里有正确的索引使用方法，请告诉我!

Answer 1

您可以在 article.projects 元素上调用 Array 的 indexOf 并搜索您的特定元素:

$(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>