2つのフレックスアイテムの間に矢印を描く

Question

2つのフレックスアイテムが追加されるときに矢印が挿入されるようにしたい（コードを実行してください）。追加された各フレックスアイテムの最初のフレックスアイテムの後に追加して、矢印で接続されているようにする必要があります。矢印は、それらを接続するボックスの境界線の中心点（ボックス中心ではない）にある必要があります。

$('#clickMe').click(function() { 
 
    $('#Demosss').append($('<li class="flex-item">').text('text')) 
 
    $(this).insertAfter($('[class^="flex-item"]').last()); 
 
}); 
 

 
$(document).on('click', '.flex-item' ,function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: green; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    
 
} 
 
.flexActive{ 
 
    width:auto; 
 
    display:block; 
 
    flex: 1 1; 
 
    margin-right:0; 
 
} 
 

 
ul li{ 
 
    display: inline; 
 
} 
 

 

 

 

 
.enlarge{ 
 
zoom: 350%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 

 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button> 
 

 
<div class="enlarge"> 
 
<span>&#8674;</span> 
 
</div>

Answer 1

あなたはcontentとして矢印で擬似要素を使用することができますし、最初の要素からそれを排除するために、あなたのCSSで:not()を使用しています。

$('#clickMe').click(function() { 
 
    $('#Demosss').append($('<li class="flex-item">').text('text')) 
 
    $(this).insertAfter($('[class^="flex-item"]').last()); 
 
}); 
 

 
$(document).on('click', '.flex-item' ,function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; 
 
    /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-item { 
 
    background: green; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.flexActive { 
 
    width: auto; 
 
    display: block; 
 
    flex: 1 1; 
 
    margin-right: 0; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
} 
 

 
.flex-item:not(:first-child) { 
 
    margin-left: .75em; 
 
} 
 

 
.flex-item:not(:first-child):before { 
 
    content: '\21E2'; 
 
    color: black; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translate(-100%, -50%); 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"></ul> 
 

 
<button id="clickMe">Click Me</button>

Answer 2

あなたのブロック要素間の水平方向の余白を削除し、そしてあなたは、少なくとも一つのブロックがすでに追加されていることを検出すると、その後、条件付きで挿入された各ブロックの前にある矢印を追加します。

var first = true 
 

 
$('#clickMe').click(function() { 
 
    var demos = $('#Demosss') 
 
    if (!first) { 
 
     demos.append('⇢') 
 
    } else first = false 
 
    demos.append($('<li class="flex-item">').text('text')) 
 
    $(this).insertAfter($('.flex-item').last()); 
 
}); 
 

 
$(document).on('click', '.flex-item', function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: green; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    
 
} 
 
.flexActive{ 
 
    width:auto; 
 
    display:block; 
 
    flex: 1 1; 
 
    margin-right:0; 
 
} 
 

 
ul li{ 
 
    display: inline; 
 
} 
 

 

 

 

 
.enlarge{ 
 
zoom: 350%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 

 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button> 
 

 
<div class="enlarge"> 
 
</div>

Answer 3

このような何かを試してみてください。このよう

$('#clickMe').click(function() { 
 
\t \t  $('#Demosss').append($('<li class="flex-item">').text('text')) 
 
\t \t  $('.enlarge').css('display','none'); 
 
\t \t  $('#Demosss').append($('<div class="enlarge1"><span>&#8674;</span></div>')) 
 
\t \t  $(this).insertAfter($('[class^="flex-item"]').last()); 
 
\t \t }); 
 

 
\t \t $(document).on('click', '.flex-item' ,function(){ 
 
\t \t $(this).toggleClass('flexActive') 
 
\t \t })

.flex-container { 
 
\t  padding: 0; 
 
\t  margin: 0; 
 
\t  list-style: none; 
 
\t  -webkit-flex-direction: row; /* Safari */ 
 
\t  flex-direction: row; 
 
\t  flex-wrap: wrap; 
 
\t } 
 
\t .flex-item { 
 
\t  background: green; 
 
\t  padding: 5px; 
 
\t  width: 100px; 
 
\t  height: 150px; 
 
\t  margin-top: 10px; 
 
\t  margin-right: 15px; 
 
\t  line-height: 150px; 
 
\t  color: white; 
 
\t  font-weight: bold; 
 
\t  font-size: 3em; 
 
\t  text-align: center; 
 
\t  display: inline-block; 
 
\t  
 
\t } 
 
\t .flexActive{ 
 
\t width:auto; 
 
\t display:block; 
 
\t flex: 1 1; 
 
\t margin-right:0; 
 
\t } 
 

 
\t ul li{ 
 
\t display: inline; 
 
\t } 
 

 

 
\t .enlarge1{ 
 
\t \t zoom: 350%; 
 
\t } 
 

 
\t .enlarge{ 
 
\t zoom: 350%; 
 
\t }

<!-- jQuery library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
\t <!-- Latest compiled JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 

 
\t <!-- add LI here --> 
 
\t </ul> 
 

 

 
\t <button id="clickMe">Click Me</button> 
 
\t <div class="enlarge"><span>&#8674;</span></div> 
 
\t <div class="arrow"> 
 
\t </div>

は