HTML 中断标记混淆了 javascript 处理的项目顺序

Question

以下用于切换图像的代码按预期工作...直到出于格式设置原因，将不同的 HTML 标记引入控件流。 通过插入一个简单的中断标签(下面用星号表示(，下面的块的逻辑移动了一个，即单击

• pict/8/tiny将揭示pict/4/large
• pict/4/tiny将揭示pict/5/large
• pict/5/tiny将揭示pict/6/large
• pict/6/tiny将显示空白

段落标签中允许使用中断标签，但为什么它会混淆 javascript 目的的跨度？如何解决这个问题？

$(document).ready(function() {
$("#image-flip_controls").on('click', 'span', function() {
$("#image-flip img").removeClass("opaque");

var newImage = $(this).index();

$("#image-flip img").eq(newImage).addClass("opaque");

$("#image-flip_controls span").removeClass("selected");
$(this).addClass("selected");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='image-flip_controls'>
<span class="selected"><img src="/pict/1/tiny_27122_20170321160746452.jpg" /></span> 
<span><img src="/pict/2/tiny_LI_P_20150215_059.jpg" /></span>
<span><img src="/pict/3/tiny_LI_P_20150215_056.jpg" /></span>
<span><img src="/pict/7/tiny_41513_20180525135457797.jpg" /></span>
**<br />**
<span><img src="/pict/8/tiny_27130_20170321160804655.jpg" /></span>
<span><img src="/pict/4/tiny_LI_P_20140901_016.jpg" /></span>
<span><img src="/pict/5/tiny_LI_P_20120130_005.jpg" /></span>
<span><img src="/pict/6/tiny_EN_P_20140615_033.jpg" /></span>
</p>
<div class='row'>
<div id='image-flip' class='shadow'>
<img class="opaque" src="/pict/1/large_27122_20170321160746452.jpg" />
<img src="/pict/2/large_LI_P_20150215_059.jpg" />
<img src="/pict/3/large_LI_P_20150215_056.jpg" />
<img src="/pict/7/large_41513_20180525135457797.jpg" />
<img src="/pict/8/large_27130_20170321160804655.jpg" />
<img src="/pict/4/large_LI_P_20140901_016.jpg" />
<img src="/pict/5/large_LI_P_20120130_005.jpg" />
<img src="/pict/6/large_EN_P_20140615_033.jpg" />
</div>
</div>

Answer 1

元素的索引是它在父元素中的位置。

给定<div> <img> <img> </div>：

• 第一个图像是div 中的第一个元素
第二个
• 图像是div 中的第二个元素

给定<div> <img> <br> <img> </div>：

• 第一个图像是div 中的第一个元素
• 第二个图像是div 中的第三个元素

您似乎希望忽略<br>元素。不会的。它是一个元素。

---

改用.index( selector )获取 jQuery 集合中的索引。