在 jquery 中获取 div class 网格的第三列

Question

我的网格结构如下：

<div class="offer-details center-text">
        <div class="col-lg-3">
                      <p>were </p>
        </div>
        <div class="col-lg-6 center-col price-col">
          <p>asdd</p>
        </div>
        <div class="col-lg-3"> 
          <p>
            For questions or to cancel,<br>
            just call <b>12345</b>
          </p>
        </div>
  </div>

我需要使用 jquery 更改 .offer-details 的第三个 div 的文本。我试过了

$(".offer-details .col-lg-3:second-child").html("<p>For inquiries<br>please contact <b>123 456-7896</b></p>");

但这是错误 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: second-child

有什么方法可以 access/get 在 jquery 中 div 而不给 div 新的 class 吗？

请指导。提前致谢。

Answer 1

您可以使用 :nth-child(2) 的查询选择器。

Answer 2

您可以为此使用第 n 个子选择器。请注意索引从 1:

开始

Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1.

https://api.jquery.com/nth-child-selector/

Answer 3

您可以使用 nth-child:

$(".offer-details .col-lg-3:nth-child(2)").html(...l

Answer 4

$(".offer-details").children().eq(2).html("<p>For inquiries<br>please contact <b>123 456-7896</b></p>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="offer-details center-text">
  <div class="col-lg-3">
    <p>were </p>
  </div>
  <div class="col-lg-6 center-col price-col">
    <p>asdd</p>
  </div>
  <div class="col-lg-3">
    <p>
      For questions or to cancel,<br> just call <b>12345</b>
    </p>
  </div>
</div>

在 jquery 中获取 div class 网格的第三列

get third col of div class grid in jquery

html

javascript

css

grid

jquery