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最接近的元素en count index：

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

我的建议是在每个文章标签中加上一个属性（也就是索引）。像：

    // 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");

你怎么看？这里有一个小演示： https://jsfiddle.net/cej45wn1/

Answer 2

您可以在indexOf元素上调用数组的article.projects并搜索您的特定元素：

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

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

修改

2 个答案: