我有一个JavaScript数组:

var j_array = new Array();
j_arry=["class:1","division:a","class:5","class:3","division:b","division:c","division:d","class:10"];

我需要找到该类的次数和它的数组键,所以我使用:

found = $.inArray('class', j_array); ` But it returns `-1`;

然后我用:

var search = 'class';
$.each([j_array], function(index, value){
    $.each(value, function(key, cell){
        if (search.indexOf(cell) !== -1)
            console.log('found in array '+index, cell);
    });
});

但这也是错误的.我该如何解决这个问题？

从这个数组我想得到以下内容:

1. 等级为4次,等级为0,2,3和7

2. 我想只创建一个单独的类数组,即

   new_array = ["class:1", "class:2", "class:3", "class:10"];
   

   Run Code Online (Sandbox Code Playgroud)

3. 目前有四个班级j_array.我怎么能得到Nth class value

也就是说,1st class value ="class:1",2nd class value="class:5",等.

当我尝试在网格完成四列时进行水平滚动时遇到问题。看

#series {
    display: grid;
    grid-gap: 16px;
    overflow-x: scroll;
    padding: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: column;
}

使用这个我得到低于输出

但是，你知道，我想要像“四列”和一个滚动条一样查看更多。

有什么问题。

如何使用CSS将"3"移动到列表末尾？

看到 jsbin here

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  align-self: flex-end; /* this doesn't work; how can I move 3 to the end? */
}

 <ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>

我在另一个 div 中有 2 个 div 元素，它们每个都显示为一个块。所以div1就在div2 的正上方。

我想添加某种用户可以单击并拖动的“条”，最终会调整div2 的大小，而div1将自动调整相同的大小。

div1和div2的父级具有 style:display:flex;flex-direction:column;并且div1具有，flex-grow:1因此它会自动调整大小。

我希望调整大小栏是这样的：

我如何添加这样的东西？还有什么方法可以改变它在 CSS 中的外观？

我有一些 CSS，我想要一个默认颜色，然后用一个变量覆盖它。当 CSS 变量不存在时，我想使用后备颜色。

:root {
    /*--tintColor: red;*/
}

.text {
    color: blue;
    color: var(--tintColor);
}

当变量没有像注释掉那样设置时，颜色变为黑色。在这种情况下，我希望在未定义变量时颜色回到蓝色。这可能吗？

假设我有这个包含以下选项的变量html:

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20">20</option>'+
            '</select>';

我如何以编程方式选择html变量中的选项,以便在我将它们附加到某个地方时,例如

$(this).children('div').append(html);

它会变成这样:

<div> <!-- children div of the current scope -->
  <select>
    <option value="10" selected>10</option>
    <option value="20">20</option>
  </select>
</div>

这怎么可能？

编辑:变量内容是从远程位置生成的,我必须在将值附加到div之前在本地更改它.因此,问题.

编辑2:对不起混淆,问题已根据我的实际情况进行了更新.

我从这里拿了代码.代码运行良好但是当我添加一个额外div的包装div类时fullwidth,图像高度不会根据屏幕的高度平均缩放.

这就是它最初的样子:

body,
html {
  height: 100%;
}

.fullwidth {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

<div class="fullwidth">
  <div class="repeat-x bg-1">&nbsp;</div>
  <div class="repeat-x bg-2">&nbsp;</div>
  <div class="repeat-x bg-3">&nbsp;</div>
</div>

fullwidth用另一个包装后div: -

body,
html {
  height: 100%;
}

.fullwidth {
  display: flex;
  flex-direction: …

我正在尝试构建一个带有标题栏、导航页眉、页脚和中间的主要内容区域的 Web 布局（侧边栏和主视图一分为二）。

我打算使用 CSS Grid 布局。我当前的代码管理这一切，除了：主要内容（和侧边栏）根据其内容进行调整。这不是我想要的。

如何让第三个网格行填充所有剩余的垂直空间？

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content auto min-content;
  grid-gap: 10px;
  grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
}

.title {
  grid-area: header;
  background-color: #1BC336;
}

.navigation {
  grid-area: nav;
  background-color: #C3A21B;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
  overflow: auto;
}

.main {
  grid-area: main;
  background-color: #1BC3B9;
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #5C1BC3;
}

<div class="grid">
  <div …

当以编程方式更改弹性框项目的维度或位置属性时,我遇到了不同的浏览器行为.布局未在Chrome上恢复其原始状态.

在这支笔中,当用户点击图像时,我将项目位置更改为绝对并修改其宽度和高度(实际上它可能是影响布局的任何内容,例如填充).当用户再次单击时,我回滚了更改,因此我希望布局相应地重置.

一个js的解决方法是强制布局重新渲染,快速将项目填充来回改变1px,但我想知道:

为什么会发生这种情况,是否只有css解决方法？

铬

当用户再次单击并重置弹性项目样式时,不再考虑弹性基础并且布局中断.

火狐

当用户再次单击并重置弹性项目样式时,将正确呈现所有项目.

new Vue({
  el: '#app',

  data() {
    return {
      activeImageIndex: null,
      images: [{
          url: 'https://unsplash.it/600',
          style: {
            flexBasis: '50%'
          }
        },
        {
          url: 'https://unsplash.it/600',
          style: {
            flexBasis: '50%'
          }
        },
        {
          url: 'https://unsplash.it/600',
          style: {
            flexBasis: '30%'
          }
        },
        {
          url: 'https://unsplash.it/600',
          style: {
            flexBasis: '30%'
          }
        },
        {
          url: 'https://unsplash.it/600',
          style: {
            flexBasis: '30%'
          }
        },
      ]
    }
  },


  methods: {
    onClick(index) {
      this.activeImageIndex = this.activeImageIndex === index ? null …

是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？

我有隐式类，允许行包装到新行上，但是没有最大列数。

这是使用弹性盒的一种方法的代码笔

CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

另一种方法是使用网格

.grid {
  display: grid;
  counter-reset: grid-items;
  position: relative;
}


.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？