0

Есть два маркированных списка. У одного в атрибутах data-img элементов li прописаны urlы картинок, которые должны стать фоном у элементов li a:before второго маркированного списка. попробовал несколько вариантов:

  1. не подставляет фон в 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>

  1. еще попробовал к порядковому номеру элементов 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>
    подскажите как все таки можно его туда прикрепить?
4
  • из яваскрипта нельзя обращаться к любым псевдоэлементам
    – Grundy
    Commented 22 февр. 2016 в 16:58
  • это мне только стилями задавать остается?
    – engenes
    Commented 22 февр. 2016 в 16:59
  • да, только стилями
    – Grundy
    Commented 22 февр. 2016 в 16:59
  • вот попробовал еще вот так:(ru.stackoverflow.com/questions/496099/…)
    – engenes
    Commented 22 февр. 2016 в 18:54

2 ответа 2

1

можно вставить нужные правила в css

$(".backround").each(function(i) {
  var bg = $(this).data("img");
  document.styleSheets[0].insertRule("ol.flex-control-nav li:nth-child(" + (i + 1) + ") a:before{background-image: url(" + bg + ")}", 0);
})
.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;
  background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.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>

2
  • Что то наподобие как раз пробовал, как раз вашим методом наиболее близок был. А что значит [0] и 0 в конце строки?
    – engenes
    Commented 22 февр. 2016 в 20:41
  • @ЕвгенийШевцов в [0] Первую таблицу стилей ... добавить правило перед 0 первым правилом
    – рони
    Commented 22 февр. 2016 в 20:48
1

В спецификации есть следующие строки:

NOTE: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

То есть, использование псевдо-элементов селекторах разрешено, но так как они не соответствуют ни одному элементу, то и возвращены они не будут. А так как их нельзя получить в яваскрипте, то и стиль, в яваскрипте, им нельзя присвоить.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.