如何获得偶数数组索引并更改其背景颜色

时间:2019-05-15 03:09:27

标签: javascript android arrays reactjs react-native

现在我想编写一个函数来获取偶数数组索引并动态更改其背景颜色

enter image description here

就像上面显示的图像一样,我想选择列表项并将其更改为背景图像。

2 个答案:

答案 0 :(得分:3)

您可以使用数组的奇偶索引来实现这一点。

JavaScript 中,您可以使用以下代码来实现。

$('.js-toprow').each(function(index) {
    if (index % 2 === 0) { // Even
      $(this).css('background', '#ddd');
    } else { // Odd
      $(this).css('background', '#ff0000');
    }        
});

Android 中,您可以使用以下代码来实现。

@Override
public View getView(int position, View convertView, ViewGroup parent) {  
    View view = super.getView(position, convertView, parent);  
    if (position % 2 == 1) {
        view.setBackgroundColor(Color.BLUE);  
    } else {
        view.setBackgroundColor(Color.CYAN);  
    }
    return view;  
}

React-Native 中,您可以使用以下代码来实现。

renderRow(rowData, sectionID, rowID) {

   let style = [
         styles.row, 
         {'backgroundColor': colors[rowID % colors.length]}
       ];

   return (<View style={style}/>);
 }

 let colors = ['#123456', '#654321', '#fdecba', '#abcdef'];

 let styles = StyleSheet.create({
       row: {
            // .. rows style
       }
 });

OR

(Provided Array).map((array, index) => {
        return (
            <View style={{ backgroundColor: (index % 2 == 0) ? '#ecf0f1' : '#fff' }}>
                <Text>{array.key}</Text>
            </View>
        )
    })

答案 1 :(得分:0)

如果您使用的是jQuery,

df1 <- structure(list(id = c(1L, 1L, 1L, 1L, 1L, 2L, 2L, 2L, 2L, 2L), t = c(1L, 2L, 3L, 4L, 5L, 1L, 2L, 3L, 4L, 5L), outcome = c(10L, 20L, 30L, 40L, 40L, 20L, 30L, 40L, 40L, 20L)), class = "data.frame", row.names = c(NA, -10L))