按索引循环HTML按钮

Question

现在，我所拥有的代码只占用一个索引并仅显示该索引处的按钮。我的问题是，我如何循环这个，或者更好的循环它的可能性，以便我可以在让我们说每两个标签索引之后显示按钮。我是jQuery的新手，很抱歉，如果已经有类似的问题了。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.button1').hide();
  $('.button1').eq(1).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1</label><button class="button1">price</button></br>
<label>2</label><button class="button1">price</button></br>
<label>3</label><button class="button1">price</button></br>
<label>4</label><button class="button1">price</button></br>
<label>5</label><button class="button1">price</button></br>
<label>6</label><button class="button1">price</button></br>

＆＃13;

＆＃13;

＆＃13;

Answer 1

很少有事情要注意。

1. 没有</br>。它是<br />。
2. 请参阅工作代码段。
＆＃13;
＆＃13;
$(document).ready(function() {
  $('.button1').hide();
  $('.button1').each(function (index) {
    if (index % 2)
      $(this).show();
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1</label><button class="button1">price</button><br />
<label>2</label><button class="button1">price</button><br />
<label>3</label><button class="button1">price</button><br />
<label>4</label><button class="button1">price</button><br />
<label>5</label><button class="button1">price</button><br />
<label>6</label><button class="button1">price</button><br />
＆＃13;
＆＃13;
＆＃13;

如果您想使用CSS3选择器，也可以使用纯CSS实现。

＆＃13;
＆＃13;
button:nth-of-type(2n+1) {
  display: none;
}
＆＃13;
<label>1</label><button class="button1">price</button><br />
<label>2</label><button class="button1">price</button><br />
<label>3</label><button class="button1">price</button><br />
<label>4</label><button class="button1">price</button><br />
<label>5</label><button class="button1">price</button><br />
<label>6</label><button class="button1">price</button><br />
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用css3选择器：

button {
    display:none;
}

然后定位每一秒。

button:nth-of-type(2n+1) {
    display:block;
}

在不需要时使用jQuery保存。

Answer 3

$(document).ready(function() {
  $('.button1:nth-of-type(2n + 1)').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1</label>
<button class="button1">price</button>
</br>
<label>2</label>
<button class="button1">price</button>
</br>
<label>3</label>
<button class="button1">price</button>
</br>
<label>4</label>
<button class="button1">price</button>
</br>
<label>5</label>
<button class="button1">price</button>
</br>
<label>6</label>
<button class="button1">price</button>
</br>

Answer 4

如果DOM中已存在<button>元素，则根本不需要使用任何JS代码。您可以使用CSS的:nth-child选择器实现此目的，如下所示：

.button1 { display: none; }
.button1:nth-child(2n+1) { display: inline-block; }

<label>1</label>
<button class="button1">price</button><br />
<label>2</label>
<button class="button1">price</button><br />
<label>3</label>
<button class="button1">price</button><br />
<label>4</label>
<button class="button1">price</button><br />
<label>5</label>
<button class="button1">price</button><br />
<label>6</label>
<button class="button1">price</button><br />

Answer 5

$(document).ready(function() {
  $('.button1').hide();
  $('.button1').each(function(index){
     if(index % 2 != 0){
       $(this).show();
     }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1</label>
<button class="button1">price</button>
</br>
<label>2</label>
<button class="button1">price</button>
</br>
<label>3</label>
<button class="button1">price</button>
</br>
<label>4</label>
<button class="button1">price</button>
</br>
<label>5</label>
<button class="button1">price</button>
</br>
<label>6</label>
<button class="button1">price</button>
</br>

Answer 6

如果你真的想要显示/隐藏所有按钮，那么你就不要在这里使用循环，只需放下以下声明就可以了。

$(function() {
  $('button').show();
});

使用元素选择器更快地运行代码。

Answer 7

您可以通过each()循环浏览每个按钮来完成此操作。从那里，您可以使用当前按钮索引（您在回调中免费获得）的remainder (%)运算符来确定要隐藏哪一个。由于您只想显示其他所有按钮，只需在条件中传递index % 2 === 0。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.button1').each(function(index, elem) {
    if (index % 2 === 0) {
      $(this).hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>1</label>
<button class="button1">price</button>
</br>
<label>2</label>
<button class="button1">price</button>
</br>
<label>3</label>
<button class="button1">price</button>
</br>
<label>4</label>
<button class="button1">price</button>
</br>
<label>5</label>
<button class="button1">price</button>
</br>
<label>6</label>
<button class="button1">price</button>
</br>

＆＃13;

＆＃13;

＆＃13;