Question

我有一个索引为[0，2]的Javascript数组

还有很多这样的段落元素

<div>
  <p>some text</p>
  <p>some more text</p>
  <p>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

将css类添加到其索引显示在数组中的段落的简洁方法是什么？在这种情况下，我希望在第一和第三段中添加一个类。

预期输出：

<div>
  <p class=“red”>some text</p>
  <p>some more text</p>
  <p class=“red”>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

Answer 1

forEach循环就足够了。

import { Text } from 'react-native'
import React, { Component } from 'react'

let Results = props => {
  console.log(props)
  switch (props.navigation.state.key) {
    case 'Products': {
      return props.screenProps.suggestions.products.map(pr => <Text>{pr.product_title}</Text>)
      break
    }
    case 'Brands': {
      return props.screenProps.suggestions.warehouses.map(pr => <Text>{pr.warehouse_name}</Text>)
      break
    }

    case 'Categories': {
      return props.screenProps.suggestions.categories.map(pr => <Text>{pr.categories}</Text>)
      break
    }

    case 'Upcs': {
      return props.screenProps.suggestions.upcs.map(pr => <Text>{pr.product_title}</Text>)
      break
    }

    case 'Tags': {
      return props.screenProps.suggestions.tags.map(pr => <Text>{pr.product_title}</Text>)
      break
    }
  }
  return <Text>Home</Text>
}

const TabNavigator = createMaterialTopTabNavigator({
  Products: Results,
  Brands: Results,
  Categories: Results,
  UPC: Results,
  Tags: Results,
})

let f = Component => {
  let r = props => {
    // alert(props)
    return <Component {...props} />
  }
  return r
}

export default createAppContainer(TabNavigator)

var arrIndex = [0, 2];
var elems = document.querySelectorAll('div p');

arrIndex.forEach(function(p){
	elems[p] && elems[p].classList.add('red');
})

.red {
  color: red;
}

Answer 2

使用querySelectorAll并检查索引：

const arr = [0, 2];
const parent = document.getElementById("parent");
parent.querySelectorAll("p").forEach((elem, idx) => arr.includes(idx) ? elem.classList.add("red") : elem);

.red {
  color: red;
}

<div id="parent">
  <p>some text</p>
  <p>some more text</p>
  <p>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

旧版浏览器：

var arr = [0, 2];
var parent = document.getElementById("parent");
parent.querySelectorAll("p").forEach(function(elem, idx) {
  if (arr.indexOf(idx) > -1) {
    elem.classList.add("red");
  }
});

.red {
  color: red;
}

<div id="parent">
  <p>some text</p>
  <p>some more text</p>
  <p>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

Answer 3

使用document.querySelectorAll获取所有段落。遍历数组并将类添加到所需的段落

var a=document.querySelectorAll('p');
var arr=[0,2]
for(let i=0;i<a.length;i++)
{
if(arr.indexOf(i)>-1)
a[i].classList.add("red");
}

.red
{
color:red
}

<div>
<p>some text</p>
<p>some more text</p>
<p>some sample text</p>
<p>some text here</p>
<p>some great text</p>
</div>

Answer 4

一种方法是选择带有该<p>元素的所有元素，然后检查该特定元素的索引是否存在于数组中：

var arrIndex = [0, 2];
var elems = document.querySelectorAll('div p');
for(i=0; i<elems.length; i++){
  if(arrIndex.indexOf(i) !== -1){
    elems[i].classList.add('red');
  }
}

.red {
  color: red;
}

<div>
  <p>some text</p>
  <p>some more text</p>
  <p>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

避免使用includes()，因为IE浏览器和旧JS版本的浏览器均不支持它

另一种方法是只循环索引数组以添加red类：

var arrIndex = [0, 2];
for(var i=0; i<arrIndex.length; i++){
 document.querySelectorAll('div p')[arrIndex[i]].classList.add('red');
}

.red {
  color: red;
}

<div>
  <p>some text</p>
  <p>some more text</p>
  <p>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

Answer 5

如果他们始终是兄弟姐妹，则可以使用:nth-child() pseudo-class selector。遍历数组并生成选择器以基于选择器获取元素，并遍历所选元素以添加类。

var index = [0, 2];

// generate the selector
var selector = index.map(v => `div p:nth-child(${ v + 1 })`).join();

// get elements using the selector
// iterate and add class
document.querySelectorAll(selector).forEach(e => e.classList.add('red'))

.red {
  color: red;
}

<div>
  <p>some text</p>
  <p>some more text</p>
  <p>some sample text</p>
  <p>some text here</p>
  <p>some great text</p>
</div>

注意： 。这是ES6解决方案。

Answer 6

<div>
  <p>Some text</p>
  <p>Some more text</p>
  <p>Some sample text</p>
  <p>Some text here</p>
  <p>Some great text</p>
</div>

.red{
    color: red;
 }


const arr = [0,2]
const para = document.querySelectorAll('p')

arr.forEach(function(arr){
  para[arr].classList.add('red')
})

根据javascript中数组的索引将css类添加到子元素

6 个答案: