Digamos, por ejemplo, que tengo esta línea de tiempo (ver fragmento).
Este fragmento contiene este rectángulo.
<rect x="95" y="9" width="383" height="22.991999999999997" stroke="#4bbdde" stroke-width="1" fill="#4bbdde"></rect>Lo que quiero hacer es seleccionar este rectángulo y obtener información de él. En aras de la simplicidad, digamos que quiero cambiar el relleno a negro.
Lo que creo que debería funcionar es esto (de JQuery Find Elements By Background-Color ):
<script> var rects = $('rect').filter(function() { var match = '#4bbdde'; return ( $(this).css('fill').toLowerCase() == match ); }).css('fill', '#000000'); // change background color of all black spans </script>Noté que definitivamente puedo seleccionar y volver a colorear cualquier rectángulo con esto.
<Script> $('rect').css('fill', '#000000'); </Script>Agregaría esto como un fragmento, pero por alguna razón no puedo hacer que funcione en el fragmento, pero esto funciona en mi proyecto.
¿Cómo puedo seleccionar solo el con cierto relleno?
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'string', id: 'Bar'}); dataTable.addColumn({ type: 'string', role: 'style'}); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington','Washington','#4bbdde', new Date(1789, 3, 30), new Date(1797, 2, 4) ], ]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline" style="height: 180px;"></div> </body> </html>Descubrí que lo siguiente funcionó para obtener una lista de <rect> que coincidían con el color.
var blue= '#4bbdde' var rects = $('rect') function checkColor(arr){ var results = []; for (let i of arr){ colorCheck=$(i).attr('fill') if(colorCheck == blue){results.push(i)} }; return results }; console.log(checkColor(rects))