Javascript 在两个弹性项之间绘制箭头

我希望在添加两个flex项时将箭头插入它们之间（请运行代码）。它必须添加在第一个弹性项之后，以便它们之间的每个已添加弹性项都显示为通过箭头连接。箭头必须位于连接框边界（而非框中心）的中点

$（'clickMe'）。单击（函数（）{
$（'#Demosss'）.append（$（'
）.text（'text'））
$（this）.insertAfter（$（'[class^=“flex item”]'）.last（）；
});
$（文档）.on（'click'，'flex item'，function（）{
$（this.toggleClass（'flexActive'））
})

.flex容器{
填充：0；
保证金：0；
列表样式：无；
-webkit弹性方向：行；/*Safari*/
弯曲方向：行；
柔性包装：包装；
}
.弹性项目{
背景：绿色；
填充物：5px；
宽度：100px；
高度：150像素；
边缘顶部：10px；
右边距：15px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
显示：内联块；
}
.flexActive{
宽度：自动；
显示：块；
弹性：1；
右边距：0；
}
ulli{
显示：内联；
}
.放大{
变焦：350%；
}

点击我
⇢

删除块元素之间的水平边距，然后在检测到至少已添加一个块时，有条件地将箭头附加到每个插入的块之前

var first=true
$（'#clickMe'）。单击（函数（）{
var demos=$（“#demoss”）
如果（！第一个）{
demos.append（“⇢；”）
}else first=false
demos.append（$（'
）.text（'text'））
$（this.insertAfter（$（'.flex item'）.last（））；
});
$（文档）.on（'click'，'flex item'，函数（）{
$（this.toggleClass（'flexActive'））
})

.flex容器{
填充：0；
保证金：0；
列表样式：无；
-webkit弹性方向：行；/*Safari*/
弯曲方向：行；
柔性包装：包装；
}
.弹性项目{
背景：绿色；
填充物：5px；
宽度：100px；
高度：150像素；
边缘顶部：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
显示：内联块；
}
.flexActive{
宽度：自动；
显示：块；
弹性：1；
右边距：0；
}
ulli{
显示：内联；
}
.放大{
变焦：350%；
}

点击我

您可以使用带有箭头的伪元素作为

content

，要将其从第一个元素中排除，请在CSS中使用

：not（）

$（'clickMe'）。单击（函数（）{
$（'#Demosss'）.append（$（'
）.text（'text'））
$（this）.insertAfter（$（'[class^=“flex item”]'）.last（）；
});
$（文档）.on（'click'，'flex item'，function（）{
$（this.toggleClass（'flexActive'））
})

.flex容器{
填充：0；
保证金：0；
列表样式：无；
-webkit柔性方向：行；
/*狩猎*/
弯曲方向：行；
柔性包装：包装；
}
.弹性项目{
背景：绿色；
填充物：5px；
宽度：100px；
高度：150像素；
边缘顶部：10px；
右边距：15px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
显示：内联块；
位置：相对位置；
}
.flexActive{
宽度：自动；
显示：块；
弹性：1；
右边距：0；
}
ulli{
显示：内联；
}
.flex项：非（：第一个子项）{
左侧边缘：.75em；
}
.flex项：非（：第一个子项）：之前{
内容：'\21E2'；
颜色：黑色；
位置：绝对位置；
最高：50%；
左：0；
转换：翻译（-100%，-50%）；
z指数：1；
}

单击“我”

尝试这样做

$（'clickMe'）。单击（函数（）{
$（'#Demosss'）.append（$（'
）.text（'text'））
$（'.放大'）.css（'display'，'none'）；
$（'demoss'）。追加（$（'和#8674；'））
$（this）.insertAfter（$（'[class^=“flex item”]'）.last（）；
});
$（文档）.on（'click'，'flex item'，function（）{
$（this.toggleClass（'flexActive'））
})

.flex容器{
填充：0；
保证金：0；
列表样式：无；
-webkit弹性方向：行；/*Safari*/
弯曲方向：行；
柔性包装：包装；
}
.弹性项目{
背景：绿色；
填充物：5px；
宽度：100px；
高度：150像素；
边缘顶部：10px；
右边距：15px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
显示：内联块；
}
.flexActive{
宽度：自动；
显示：块；
弹性：1；
右边距：0；
}
ulli{
显示：内联；
}
.放大1{
变焦：350%；
}
.放大{
变焦：350%；
}

点击我
⇢

像这样吗@MichaelCoker将其添加为一个答案。把最后的一块去掉很多。这起作用了。如果我想让第一个元素上的箭头也开始，我该怎么办？只是为了让我的概念更清楚。@darsh真棒，没问题。您只需删除

：not（：first child）

的两个实例，这样选择器将是

。flex item{margin left:.75em；}

和

。flex item:before{content:'\21E2'；…}

就像是的，我读到了它并弄明白了。再次感谢！你太棒了：）@michaelcokerthis是使用jquery的另一种方式。非常感谢。顺便说一句，你的代码需要一些编辑。