html - 如何更改CSS中元素的显示顺序？

Question

我在显示页面中的元素时遇到问题

我有类似的元素

<img src='test1.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test2.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test3.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test4.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test5.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test6.jpg'>
<div>
<a href='#'>change</a>
</div>

图像通过 DB 记录添加到 dom，我想为每个图像添加 <div> 并更改 <a> 标签以提供用户可以选择执行操作(例如更改图像源)。我所有的 div 都有类似的 css

display: block;
float: right;

和图像有

display: inline-block;

我的问题是

图片和 div 的顺序错误。

例如:

img1 img2 img3 img4 img5 img6        div6  div5 div4 div3 div2 div1

单击 div6 将更改 img6 属性。

这是我需要的正确顺序

img1 img2 img3 img4 img5 img6        div1  div2 div3 div4 div5 div6

我该如何解决这个问题？非常感谢!

Answer 1

将 float 元素插入堆栈时考虑它们。如果你想让 div 看起来像

div1 div2 div3

然后你必须按顺序将它推送到dom

div3 div2 div1

但是，更简单和更常用的方法是使用 jQuery 获取被点击的 div 的索引，并将更改应用于具有相同索引的图像。下面是一个在单击相应的 div 时隐藏图像的示例:

$("div").click(function(){
    var idx = $(this).index();
    $("img:eq("+idx+")").hide(); //change that to whatever operation you want to do on the image
});

---

这可能有用:

• > http://docs.jquery.com/Selectors/eq
• > http://api.jquery.com/index/