如何成对显示子数组中的值和备用类属性顺序?

时间:2017-07-01 12:09:56

标签: php html css toggle grouping

如何显示每两个子阵列'在切换其类属性的顺序时,NAME在单独的div中值,并使用循环将div对包装在包含div中?

这是我的代码:

function foo(arrA){
  if(!arrA || arrA[0]===0)
    return undefined;

  let arrB =[];
  let prevEntry = 1;

  for(let i=0; i <arrA.length; i++){
    if (2*prevEntry == arrA[i]){
      prevEntry *= 2;
      arrB.push(Math.pow(arrA[i], 2)).toString();
    }
  }
  return arrB;
}
console.log(foo([2,4,6,8,9,15,16,27]));

返回:

<div class="row clearfix">
<?
    $arr = array(
            array('ID'=>1, 'NAME'=>'a'),
            array('ID'=>2, 'NAME'=>'b'),
            array('ID'=>3, 'NAME'=>'c'),
            array('ID'=>4, 'NAME'=>'d'),
            array('ID'=>5, 'NAME'=>'f'),
            array('ID'=>6, 'NAME'=>'g')
    );
    $i = 0;
    $el_in_row = 2;
    foreach($arr as $key => $arItem)
    {
        $i++;
        $odd = ($i%2) ? true : false;
        $class = ($odd === true)?'vertical':'horizontal';
        ?>
        <div class="<?=$class;?>">
            <?=$arItem['NAME'];?>
        </div>
        <? ?>
        <? if($i >= $el_in_row): $i = 0;?>
            </div><div class="row clearfix">
        <? endif;?>
        <?
    }
?>
</div>

但我需要这个结果:

<div class="row clearfix">
    <div class="vertical">a</div>
    <div class="horizontal">b</div>
</div>
<div class="row clearfix">
    <div class="vertical">c</div>
    <div class="horizontal">d</div>
</div>
<div class="row clearfix">
    <div class="vertical">f</div>
    <div class="horizontal">g</div>
</div>

3 个答案:

答案 0 :(得分:0)

PHP中用于构建对(或三元组,......)的方便的数组函数是array_chunk()

$pairs = array_chunk($arr, 2);

然后,当您想要输出迭代时,可以在迭代中进行迭代。

由于每个对中只需要 name 列,下一个方便的数组函数是array_column(),它将该对转换为一对名称。

$names = array_column($pair, 'NAME');

除了将这些名称与您要输出的类组合在一起之外,array_combine()对于使用类键入名称非常有用:

array_combine(['vertical', 'horizontal'], $names);

要将它们捆绑在一起,您可以使用生成器函数从输入数组中生成这些对。函数具有可以控制参数的好处,我在这里使用默认值来匹配您的示例:

function chunk_columns(array $array, $column = 'NAME', array $keys = ['vertical', 'horizontal']) {

    $pairs = array_chunk($array, count($keys));

    foreach ($pairs as $pair) {
        yield array_combine(
            $keys,
            array_column($pair, $column)
        );
    }
}

该函数的用法示例如下(在HTML中使用PHP进行模板化):

<?php foreach (chunk_columns($arr) as $chunk) { ?>

  <div class="row clearfix">
      <?php foreach ($chunk as $class => $name) { ?>
        <div class="<?= $class ?>"><?= $name ?></div>
      <?php } ?>
  </div>

<?php } ?>

在使用变量插入HTML时要小心,要将其值正确编码为HTML,请参阅htmlspecialchars()。我把它留下来让它更具代表性,在现实生活中,输出需要适当的HTML编码。

现在,对于带有示例数据的输出来完成答案:

  <div class="row clearfix">
              <div class="vertical">a</div>
              <div class="horizontal">b</div>
        </div>


  <div class="row clearfix">
              <div class="vertical">c</div>
              <div class="horizontal">d</div>
        </div>


  <div class="row clearfix">
              <div class="vertical">f</div>
              <div class="horizontal">g</div>
        </div>

答案 1 :(得分:0)

循环应如下所示:奇数行以<div class="row clearfix">开头,偶数行以</div>结束(关闭)。

$i=0;
foreach($arr as $ar)
{
  $i++;
  if($i%2) //odd rows
  {
    echo '<div class="row clearfix">'.PHP_EOL;
    echo '  <div class="vertical">'.$ar['NAME'].'</div>'.PHP_EOL;
  }
  else //even rows
  {
    echo '  <div class="horizontal">'.$ar['NAME'].'</div>'.PHP_EOL;
    echo '</div>'.PHP_EOL;
  }
}

答案 2 :(得分:0)

我认为我没有比这更快/更干爽:
(请记住,我使用子数组的索引来查找奇数/偶数 - 而不是ID元素值。)

代码:(Demo

$arr = array(
        array('ID'=>1, 'NAME'=>'a'),
        array('ID'=>2, 'NAME'=>'b'),
        array('ID'=>3, 'NAME'=>'c'),
        array('ID'=>4, 'NAME'=>'d'),
        array('ID'=>5, 'NAME'=>'f'),
        array('ID'=>6, 'NAME'=>'g')
);
$classes=['vertical','horizontal'];
foreach($arr as $i=>$a){
    if(!($i & 1)){  // if non-odd number; bitwise operator is ~x10 faster than modulus
        echo "<div class=\"row clearfix\"><div class=\"",reset($classes),"\">{$a['NAME']}</div>";
    }else{
        echo "<div class=\"",next($classes),"\">{$a['NAME']}</div></div>";
        $classes=array_reverse($classes); // re-order the array every odd $i iteration
    }
}

输出:

<div class="row clearfix">
    <div class="vertical">a</div>
    <div class="horizontal">b</div>
</div>

<div class="row clearfix">
    <div class="horizontal">c</div>
    <div class="vertical">d</div>
</div>

<div class="row clearfix">
    <div class="vertical">f</div>
    <div class="horizontal">g</div>
</div>

这是另一种方法,它提供相同的输出效率更高,因为它具有更少的迭代函数调用:

$arr = array(
        array('ID'=>1, 'NAME'=>'a'),
        array('ID'=>2, 'NAME'=>'b'),
        array('ID'=>3, 'NAME'=>'c'),
        array('ID'=>4, 'NAME'=>'d'),
        array('ID'=>5, 'NAME'=>'f'),
        array('ID'=>6, 'NAME'=>'g')
);
$classes=['vertical','horizontal'];
$x=0;
foreach(array_chunk(array_column($arr,'NAME'),2) as $a){
    echo "<div class=\"row clearfix\">\n";
        echo "\t<div class=\"{$classes[$x]}\">{$a[0]}</div>\n";
        echo "\t<div class=\"{$classes[$x^=1]}\">{$a[1]}</div>\n";
    echo "</div>\n";
}
  • array_column()将所有NAME值存储在新的索引单维数组中。
  • array_chunk()将生成的数组重组为一个包含两个索引元素的数组数组。
  • $classes值切换背后的“魔力”来自XOR bitwise operator ^。此方法的效果是$classes对循环的每次迭代的第二次访问将$x0更改为11更改为{{1 }}。
  • 0内的元素始终为$a0,因此可以定期/静态方式访问它们。