文章/答案/技术大牛

发布

社区首页 >问答首页 >获取背景颜色的Jquery选择器

问获取背景颜色的Jquery选择器
EN

Stack Overflow用户

提问于 2019-09-23 11:20:46

回答 3查看 50关注 0票数 0

我目前有几个部门，每个部门都有一个svg。我希望通过jquery获得下一个div的背景颜色(以类为目标)，并将其作为前一个父svg的css填充。我试着使用nextAll和prevAll，但是它不起作用。

view sample

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-09-23 12:06:54

尝试下面的代码

$(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>

票数 0

Stack Overflow用户

发布于 2019-09-23 11:49:12

nextAll()方法返回所选元素的所有后续同级元素。

同级元素是共享同一父元素的元素。

我觉得你的div不是同一个家长试试这个：

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

票数 0

Stack Overflow用户

发布于 2019-09-23 12:06:34

$(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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58055259

复制

相似问题

问获取背景颜色的Jquery选择器
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取背景颜色的Jquery选择器EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取背景颜色的Jquery选择器
EN