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

我正在使用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>

然后我转到

.project

最近的元素，计算索引：

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

但这当然也包括

div.clearfix

。 我试图通过向索引函数添加选择器来解决此问题：

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

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

有什么办法可以得到正确的计数吗

编辑 我没有给你足够的信息。上面的HTML示例只是页面中的一个元素。 可以有多个类似上面的元素，由容器、div等分割

这里的情况是，当您在

index

-函数中输入选择器时，它会在整个文档中搜索该选择器，然后返回该集合的索引

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

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

但这只返回-1

我创建了一个变通方法，但它不是我要搜索的：

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

---

如果有人在这里有一个正确的使用索引的方法，请让我知道

我的建议是在每个文章标签中放置一个属性（即索引）。比如：

    // at the bottom of the page
    // or inside $(document).ready()

    var articles=$("article");
    for (var i=0; i<articles.length; i++)
        $(articles[i]).attr("index",i);

    /* result: 
    <article index="0" class=".... 
    <article index="1" class=".... 
    */

你觉得怎么样？这里有一个小演示：

---

您可以在

文章中调用数组的
索引。项目
元素并搜索您的特定元素：


$（文档）。单击（函数（e）{
//获取目标元素
var target=$（e.target）.closest（'.project'）[0]；
//在所有article.project元素的列表中调用indexOf，搜索您的元素
var index=Array.prototype.indexOf.call（$（'article.project'），target）；
$（'#log'）.html（'点击'+索引）；
})
#log{位置：固定；顶部：0；z索引：99；背景色：rgba（0,0,0,4）；颜色：白色；}

你在哪里
SDFA

你在哪里
阿斯夫德萨德

你在哪里
asdfsd

你在哪里
虚拟文本
var$p=that.closest（“.project”）；var idx=$p.closest（'.row'）.index（$p）
？@Abayob是否要获取行内特定项目的索引？是的，我需要行下集合中article.project的索引。这是强制性的！我只需要计算article.project元素之间的数量，它们之间的所有其他元素都只是为了修复/设置样式我喜欢您的解决方案，但这是一种防止使用函数index（）的变通方法。
    // at the bottom of the page
    // or inside $(document).ready()

    var articles=$("article");
    for (var i=0; i<articles.length; i++)
        $(articles[i]).attr("index",i);

    /* result: 
    <article index="0" class=".... 
    <article index="1" class=".... 
    */

   // that = the current edited div
   var target_article=$(that).parent("article");
   var target_index=$(target_article).attr("index");