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")

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><svg><rectx="5"y="10"width="10"height="50"id="person0"></rect><rectx="25"y="10"width="10"height="50"id="person1"></rect><rectx="45"y="10"width="10"height="50"id="person2"></rect><rectx="65"y="10"width="10"height="50"id="person3"></rect><rectx="85"y="10"width="10"height="50"id="person4"></rect><rectx="105"y="10"width="10"height="50"id="person5"></rect><rectx="125"y="10"width="10"height="50"id="person6"></rect><rectx="145"y="10"width="10"height="50"id="person7"></rect><rectx="165"y="10"width="10"height="50"id="person8"></rect><rectx="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'))

}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><rectx="5"y="52"width="5"height="5"id="person0"></rect><rectx="5"y="52"width="5"height="5"id="person1"></rect><rectx="5"y="52"width="5"height="5"id="person2"></rect><rectx="5"y="52"width="5"height="5"id="person3"></rect><rectx="5"y="52"width="5"height="5"id="person4"></rect><rectx="5"y="52"width="5"height="5"id="person5"></rect><rectx="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() {
                returnthis.id.match(/^person[1-3]$/)
              })
              
console.log($rect.get())

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