Селекторы Jquery для получения цвета фона

Question

В настоящее время у меня есть несколько подразделений с SVG в каждом.Я хочу получить цвет фона следующего div (нацеленный на класс) через jquery и применить его как заливку css для svg предыдущих родителей.Я пытался использовать nextAll и prevAll, но это не сработало.

посмотреть пример

Answer 1

$(document).ready(function() {

  //this will get first child of division with awesome classname
  var theColor = $("div.awesome:first").css("background-color");

  //this will get all the svg(s) except first 
  $("div.awesome").find("svg:not(:first)").css("background-color", theColor);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="awesome" style="background-color:white;">
  <svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

<div class="awesome" style="background-color:blue;">
  <svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

<div class="awesome" style="background-color:black;">
  <svg id="curveUpColorr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

<div class="awesome" style="background-color:red;">
  <svg id="curveUpColorrrr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

Answer 2

Попробуйте код ниже

$(document).ready(function(){

$('.awesome').each(function(){
var theColor = $(this).css( "background-color" );

$(this).prev().find('svg').css( "fill", theColor);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="awesome" style="background-color:white;">
<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>
<div class="awesome" style="background-color:blue;">
<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>
<div class="awesome" style="background-color:black;">
<svg id="curveUpColorr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>
<div class="awesome" style="background-color:red;">
<svg id="curveUpColorrrr" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"></path>
			</svg>
</div>

Answer 3

Метод nextAll () возвращает все следующие родственные элементы выбранного элемента.

Родственные элементы - это элементы, которые имеют одного и того же родителя.

Я думаю, что ваш div не является тем же родителем. Trythis:

$ (". target_class"). parent (). parent (). find ("div")