Показать первый div из нескольких DIV с одинаковым именем класса - PullRequest
Новая
       1

Показать первый div из нескольких DIV с одинаковым именем класса

0 голосов
/ 29 февраля 2020

Я перебираю набор результатов, который выдает следующее HTML: 

<div class="main">
<div class="total-runs innerdiv showonce">1</div>
<div class="total-runs showonce">2</div>
</div>
<div class="main">
<div class="total-runs innerdiv showonce">3</div>
<div class="total-runs showonce">4</div>
</div>

Я хочу показать только первое имя класса div - Showonce

Результат должен быть похож на 

1
3

Ответы [ 3 ]

1 голос
/ 29 февраля 2020

Есть несколько способов сделать это

метод .first () создает новый объект jQuery из первого элемента в этом наборе (источник: * 1006) *

<script>
     $(document).ready(function(){     
      $(".main .showonce:first-child").css("background-color", "yellow");
     });
 </script>

enter image description here

enter image description here

$('div').first()

$(".showonce:first")

ИЛИ 

var divValue = $('div:first')

ИЛИ 

$('div').eq(0)

$(".showonce").eq(0)
1 голос
/ 29 февраля 2020

Вы можете использовать eq(index) для этого: 

$('.showonce').hide().eq(0).show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="total-runs innerdiv showonce">1</div>
<div class="total-runs showonce">2</div>
<div class="innerdiv showonce">3</div>

РЕДАКТИРОВАТЬ: 

$('.main .showonce').hide()
$('.main .showonce:first-child').show()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="total-runs innerdiv showonce">1</div>
  <div class="total-runs showonce">2</div>
</div>
<div class="main">
  <div class="total-runs innerdiv showonce">3</div>
  <div class="total-runs showonce">4</div>
</div>
0 голосов
/ 29 февраля 2020

Я прочитал ваш вопрос.

очень просто показать только первого и третьего ребенка вашего div, вы можете просто добавить следующее CSS в свой тег стиля, это будет сделано 

<!DOCTYPE html>
<html>
<head>


<style>
.showonce{
display:none;
}

.innerdiv{
display:block;
}
</style>
</head>
<body>


<p>The last paragraph in body.</p>

<div class="main">
<div class="total-runs innerdiv showonce">1</div>
<div class="total-runs showonce">2</div>
</div>
<div class="main">
<div class="total-runs innerdiv showonce">3</div>
<div class="total-runs showonce">4</div>
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...