Есть два маркированных списка. У одного в атрибутах data-img
элементов li
прописаны url
ы картинок, которые должны стать фоном у элементов li a:before
второго маркированного списка.
попробовал несколько вариантов:
не подставляет фон в before, но если удалить из строчки
$("ol.flex-control-nav li a:before").eq(i).css({
:before
и оставить:$("ol.flex-control-nav li a").eq(i).css({
, то фон нормально применяется к самим тегамa
$(".backround").each(function(i) {
var bg = $(this).attr("data-img");
$("ol.flex-control-nav li a:before").eq(i).css({
background: "url(" + bg + ")"
})
})
.backround {
display: inline-block;
position: relative;
width: 30%;
height: 50px;
margin: 2px;
background: #ccc;
}
li {
list-style-type: none;
/* Убираем маркеры */
}
li.but {
display: inline-block;
position: relative;
margin: 5px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid red;
text-align: center;
}
ol.flex-control-nav {
text-align: center;
}
a {
background-size: cover!important;
width: 100%;
height: 100%;
display: block;
position: relative;
}
a:before {
content: "";
width: 25px;
height: 25px;
display: block;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="parent-view">
<li class="backround" data-img="http://goodimg.ru/img/tsvetochek-risunok3.jpg"></li>
<li class="backround" data-img="http://agu-shop.ru/images/pink_flower_512x512.png"></li>
<li class="backround" data-img="http://www.raskraska.ru/counting/flower-bw.gif"></li>
</ul>
<ol class="flex-control-nav">
<li class="but"><a>1</a>
</li>
<li class="but"><a>2</a>
</li>
<li class="but"><a>3</a>
</li>
</ol>
- еще попробовал к порядковому номеру элементов
li
обратиться но фон все еще в before не вставляется...$(".backround").each(function(i) { var bg = $(this).attr("data-img"); $("ol.flex-control-nav li:nth-child(" + i + ") a:before").css({ background: "url(" + bg + ")" }) })
.backround { display: inline-block; position: relative; width: 30%; height: 50px; margin: 2px; background: #ccc; } li { list-style-type: none; /* Убираем маркеры */ } li.but { display: inline-block; position: relative; margin: 5px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid red; text-align: center; } ol.flex-control-nav { text-align: center; } a { background-size: cover!important; width: 100%; height: 100%; display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="parent-view"> <li class="backround" data-img="http://goodimg.ru/img/tsvetochek-risunok3.jpg"></li> <li class="backround" data-img="http://agu-shop.ru/images/pink_flower_512x512.png"></li> <li class="backround" data-img="http://www.raskraska.ru/counting/flower-bw.gif"></li> </ul> <ol class="flex-control-nav"> <li class="but"><a>1</a> </li> <li class="but"><a>2</a> </li> <li class="but"><a>3</a> </li> </ol>