find
查找元素功能(选择器),获取一个数组。
想获取一个元素,请使用 findOne()。
关键方法
find ( condition: number
| string
| IFindMethod
): UI
[]
通过 id、innerId、className、tag、函数 等条件查找元素,返回一个数组。
findTag( tag: number
| number
[] ): UI
[]
查找 tag,支持通过数组查找多个 tag,返回一个数组。
归属
UI
示例
通过 id 查找
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect1 = new Rect({ id: 'block', fill: '#32cd79' })
const rect2 = new Rect({ fill: '#32cd79' })
leafer.add(rect1)
leafer.add(rect2)
console.log(
leafer.find('#block') // [rect1]
)
通过 innerId 查找
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect1 = new Rect({ id: 'block', fill: '#32cd79' })
const rect2 = new Rect({ fill: '#32cd79' })
leafer.add(rect1)
leafer.add(rect2)
console.log(
leafer.find(rect2.innerId) // [rect2]
)
通过 className 查找
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect1 = new Rect({ className: 'menu', fill: '#32cd79' })
const rect2 = new Rect({ className: 'menu', fill: '#32cd79', x: 150 })
const rect3 = new Rect({ fill: '#32cd79', x: 300 })
leafer.add(rect1)
leafer.add(rect2)
leafer.add(rect3)
console.log(
leafer.find('.menu') // [rect1, rect2]
)
通过 tag 查找
ts
import { Leafer, Rect, Ellipse } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect1 = new Rect({ fill: '#32cd79' })
const rect2 = new Rect({ fill: '#32cd79', x: 150 })
const ellipse = new Ellipse({ fill: '#32cd79', x: 300 })
leafer.add(rect1)
leafer.add(rect2)
leafer.add(ellipse)
console.log(
leafer.find('Rect') // [rect1, rect2]
)
通过 函数 查找
ts
import { Leafer, Rect, Ellipse } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect1 = new Rect({ fill: '#32cd79', stroke: 'black' })
const rect2 = new Rect({ fill: '#32cd79', x: 150 })
const ellipse = new Ellipse({ fill: '#32cd79', stroke: 'black', x: 300 })
leafer.add(rect1)
leafer.add(rect2)
leafer.add(ellipse)
console.log(
leafer.find(function (item) {
return item.stroke === 'black' ? 1 : 0 // [rect1, ellipse]
})
)