关于javascript：如何在行尾指向div？


How to target div at the end of the row?

我试图在两行分隔符之间插入一个框条，如何以每行分隔符的结尾为目标？

下面是一个divs的jsiddle:http://jsiddle.net/5sn94

代码如下：

1
2
3
4
5
6
7
    <img src="//placehold.it/50x50">


    <img src="//placehold.it/50x50">


   <img src="//placehold.it/50x50">

过了一会儿，这些分隔符将转到下一行，创建一个新的"行"。如何在一行分隔符下面插入跨过整个页面宽度的分隔符。

要向您展示我想要实现的目标，请访问Google上的链接：http://bit.ly/1329rdn

然后你会看到，如果你点击任何图像，它会打开在DIV行中间更大的新图像，这是如何实现的？我该怎么做呢？

相关讨论

我认为这有助于你的调查：

1
2
3
4
5
6
7
8
9
10
11
12
div {
    display: inline-block; // <-- use display: inline-block instead of float: left
    margin: 0 15px 0 0;
    cursor: pointer;
}
.expander {
    background: coral;
    height: 100px;
    width: 100%;
    margin-bottom: 6px;
    float: left; // <-- this float makes the trick
}

号

http://jsfiddle.net/5sn94/14/

.expander是一个DIV，需要在target(悬停在我的示例中)元素之后插入。它有100%的宽度来占据整个水平空间。

要在悬停DIV I之后插入expander，请使用此javascript(在for循环内)：

1
2
3
4
div[i].onmouseover = function() {
    d.innerHTML = 'Details about div #' + this.dataset.id;
    this.parentNode.insertBefore(d, this.nextSibling).style.display = 'block';
}

您可以在jquery等中插入后面的内容。

相关讨论

您可以使用document.getElementsByTagName，但只有当您在http://jsfiddle.net/5sn94/2页上没有任何其他div时，它才能工作。/

1
2
var divs = document.getElementsByTagName('div');
divs[divs.length-1].style.border = '1px solid red';
相关讨论

使用jquery，可以使用last-child选择器：http://jsfiddle.net/5sn94/1/

相关讨论