从``iCON-'''in Icon'索引的索引位置，使用javaScript的文本块

Question

通过文本块循环循环以使用JavaScript或jQuery从icon-开始的每个元素的索引位置的最佳方法是什么？我也想忽略索引位置计算中的任何<br>标签。

我已经考虑过使用substring查找元素的位置。

这是一个示例文本块

<div class="intro">
    Lorem dolor sit<br>
    <span class="icon-pin"></span> consectetur<br>
    adiposcing elit, sed do <span class="icon-hand"></span> lorem<br>
    ipsum dolor sit amet.
</div>

我想从中得到的是每个[class^=icon-]的字符（负空间和
标签）。

例如，第一个[class^=icon-]是

中的14个字符

谢谢

Answer 1

我认为这是您想要的，它将找到跨度的索引，而忽略br

$(".intro [class^=icon-]").each(function() {
  var i = $(".intro *:not(br)").index(this)
  console.log(i)
})

演示

$(".intro [class^=icon-]").each(function() {
  var i = $(".intro *:not(br)").index(this)
  console.log(i)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="intro">
  Lorem dolor sit<br>
  <span class="icon-pin"></span> consectetur<br> adiposcing elit, sed do <span class="icon-hand"></span> lorem<br> ipsum dolor sit amet.
</div>

Answer 2

您可以像示例一样用jQuery实现它

$('[class^="icon-"]','.intro').each(function(index, element){
  console.log(index,element);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="intro">
    Lorem dolor sit<br>
    <span class="icon-pin"></span> consectetur<br>
    adiposcing elit, sed do <span class="icon-hand"></span> lorem<br>
    ipsum dolor sit amet.
</div>

Answer 3

您可以在元素上使用超过1个类。因此，您可以继续使用"图标"类，并添加另一个类似于" grabber"，现在您可以走了。只需找到带有for loop的"抓手"课程，例如;

var y = "number of grabbers";    
for(x:0;x<y;x++){
$('.grabber')[x].function.....
}