判断某一个元素包含一个属性怎么写并要找出其下标
时间: 2024-02-04 12:03:53 浏览: 27
在JavaScript中,可以使用 `hasAttribute` 方法来判断一个元素是否包含某一个属性,方法的语法如下:
```javascript
element.hasAttribute(attributeName)
```
其中,`element` 表示要判断的元素对象,`attributeName` 表示要判断的属性名,如果元素包含该属性则返回 `true`,否则返回 `false`。
要找出其下标,可以使用 `indexOf` 方法,方法的语法如下:
```javascript
array.indexOf(item)
```
其中,`array` 表示要搜索的数组,`item` 表示要查找的元素,如果找到了,则返回该元素在数组中的下标,否则返回 `-1`。
举个例子,假如我们有一个 `ul` 元素,我们要查找其中含有 `data-id` 属性的 `li` 元素,并输出它们在列表中的下标,可以这样写:
```javascript
const ul = document.querySelector('ul');
const lis = ul.querySelectorAll('li[data-id]');
lis.forEach(li => {
if (li.hasAttribute('data-id')) {
const index = Array.from(ul.children).indexOf(li);
console.log(`该li元素在列表中的下标为:${index}`);
}
});
```
在这里,我们先使用 `querySelectorAll` 方法找到所有含有 `data-id` 属性的 `li` 元素,然后遍历这些元素,对于每个元素,如果它包含 `data-id` 属性,则使用 `indexOf` 方法找到它在列表中的下标,并输出。需要注意的是,我们使用 `Array.from` 方法将 `ul.children` 转换成数组,才能使用 `indexOf` 方法。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)