Selecting IDs With Numbers Within A Range

I am currently working on something that requires me to select multiple SVG elements at a time. Each one of these SVG elements has an id: 'person' + some number ranging from 0 to a

Solution 1:

Use jQuery's slice(), if you want to avoid for loop.

var rects = $( "rect" ).slice( 1, 4 );
console.log(rects);

Gives you person1 - person3 in rects.

Solution 2:

The first logical choice would be using CSS attribute selectors with a regex. However, CSS does not support regex in selectors (as far as I know).

So, another choice is using d3.range to create the range of IDs, like this...

d3.range(first ID value, last ID value + 1, 1).map(d=>"#person" + d).join(",")

... which you can pass to selectAll, as you asked in the question:

Is there a way to do a selectAll on SVG items that have the IDs within a range?

Here is a demo:

const start = 3;
const stop = 7;
d3.selectAll(d3.range(start, stop + 1, 1).map(d=>"#person" + d).join(","))
	.style("fill", "wheat")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <rect x="5" y="10" width="10" height="50" id="person0"></rect>
  <rect x="25" y="10" width="10" height="50" id="person1"></rect>
  <rect x="45" y="10" width="10" height="50" id="person2"></rect>
  <rect x="65" y="10" width="10" height="50" id="person3"></rect>
  <rect x="85" y="10" width="10" height="50" id="person4"></rect>
  <rect x="105" y="10" width="10" height="50" id="person5"></rect>
  <rect x="125" y="10" width="10" height="50" id="person6"></rect>
  <rect x="145" y="10" width="10" height="50" id="person7"></rect>
  <rect x="165" y="10" width="10" height="50" id="person8"></rect>
  <rect x="185" y="10" width="10" height="50" id="person9"></rect>
</svg>

Solution 3:

Hope this helps thanks

var range = '2-6';//say
range = range.split('-')
for(var i=range[0];i<=range[1];i++)
{
  console.log($("#person"+i+"").attr('id'))

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<rect x="5" y="52" width="5" height="5" id="person0"></rect>
<rect x="5" y="52" width="5" height="5" id="person1"></rect>
<rect x="5" y="52" width="5" height="5" id="person2"></rect>
<rect x="5" y="52" width="5" height="5" id="person3"></rect>
<rect x="5" y="52" width="5" height="5" id="person4"></rect>
<rect x="5" y="52" width="5" height="5" id="person5"></rect>
<rect x="5" y="52" width="5" height="5" id="person6"></rect>

Solution 4:

Using jquery filter() and regex

^person[1-3]$

• ^ - start of a line

• person - matches the characters person literally (case sensitive)

  • [1-3] - range between 1 and 3

let $rect = $('rect')
              .filter(function() {
                return this.id.match(/^person[1-3]$/)
              })
              
console.log($rect.get())

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

<div>
  <rect x="5" y="52" width="5" height="5" id="person0"></rect>
  <rect x="5" y="52" width="5" height="5" id="person1"></rect>
  <rect x="5" y="52" width="5" height="5" id="person2"></rect>
  <rect x="5" y="52" width="5" height="5" id="person3"></rect>
  <rect x="5" y="52" width="5" height="5" id="person4"></rect>
  <rect x="5" y="52" width="5" height="5" id="person5"></rect>
</div>