выберите первые два деления из трех делений, которые присутствуют в делении

Question

Я хочу отобразить первые два поля, то есть garage_quoted_amt и quoted_amt из данного подразделения, поэтому, пожалуйста, помогите мне.Я новичок в JQuery.Я использовал это условие, чтобы показать ниже условие

$("#priceDifference div.row:not(:nth-of-type(3))").show();

, пожалуйста, направьте меня правильно.

<div class="row" id="priceDifference" style="display:none;">
          <div class="row">
            <div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
              <label style="padding-top:5px;">&nbsp;Quoted Price</label>
            </div>
            <div class="col-xs-4">
              <div class="form-group">
                <input type="number" name="quoted_amt" id="gobumpr_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
              <label style="padding-top:5px;">&nbsp;Garage Quoted Price</label>
            </div>
            <div class="col-xs-4">
              <div class="form-group">
                <input type="number" name="garage_quoted_amt" id="garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
              <label style="padding-top:5px;">&nbsp;Local Garage Quote</label>
            </div>
            <div class="col-xs-4">
              <div class="form-group">
                <input type="number" name="local_garage_quoted_amt" id="local_garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
              </div>
            </div>
          </div>
        </div>

Answer 1

Вы не можете показать дочерний элемент скрытого элемента.Как только элемент скрыт, все его s childs are hidden. What you can do, is to show the parent container and hide all of it дочерние элементы, кроме тех, которые вам нужно показать.

Возможно, добавьте класс hidden в строки, которые вы не хотите отображать, и добавьте этот класс вваш CSS, как .hidden { display: none; } или установить их стиль на display:none непосредственно в HTML, как вы сделали с родителем row.

Answer 2

1.Удалить style="display:none;" из родительского div <div class="row" id="priceDifference">

2.use : селектор gt ()

$("#priceDifference div.gt(1)").hide();

Рабочий фрагмент: -

$(document).ready(function(){
  $("#priceDifference .row:gt(1)").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="priceDifference"><!-- remove style="display:none;"-->
  <div class="row">
    <div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
      <label style="padding-top:5px;">&nbsp;GoBumpr Quoted Price</label>
    </div>
    <div class="col-xs-4">
      <div class="form-group">
        <input type="number" name="quoted_amt" id="gobumpr_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
      <label style="padding-top:5px;">&nbsp;Garage Quoted Price</label>
    </div>
    <div class="col-xs-4">
      <div class="form-group">
        <input type="number" name="garage_quoted_amt" id="garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-xs-1 col-lg-offset-1 form-group">
      <label style="padding-top:5px;">&nbsp;Local Garage Quote</label>
    </div>
    <div class="col-xs-4">
      <div class="form-group">
        <input type="number" name="local_garage_quoted_amt" id="local_garage_quoted_amt<?php echo $booking_id; ?>" class="form-control" style="max-width:280px;"/>
      </div>
    </div>
  </div>
</div>