Question

我希望根据第一个p标记的值找到每个类别的第3个p tag。例如第一个p标记值为Tie，然后找到它的数量。

如果html元素树应该以更好的方式格式化，我愿意接受它。所有ul的html都是从C＃后面的代码中编写的，用于从数据库加载项目。

$("#wel div ").each(function(index, element) {   
    if ($(this).('p:nth-of-type(1)').html() == "Tie")
    {
        $(this).('p:nth-of-type(3)').css('background-color','red');
    }
}


<div id="fel">Category1
    <ul>
    <li>
        <div >
            <p>Shirt</p>
            <p>Price:$25</p>
            <p>Quantity:20</p> <!--find this?-->
        </div>
        </li>
    <li>
        <div>
            <p>Tie</p>
            <p>Price:$10</p>
            <p>Quantity:10</p>
        </div>
    </li>
    <li>
        <div>
            <p>Trousers</p>
            <p>Price:$50</p>
            <p>Quantity:5</p>
        </div>
    </li>
</ul>
</div>
<div id="wel">Category2 
<ul>
    <li>
        <div >
            <p>Shirt</p>
            <p>Price:$25</p>
            <p>Quantity:20</p>
        </div>
        </li>
    <li>
        <div>
            <p>Tie</p>
            <p>Price:$10</p>
            <p>Quantity:10</p><!--find this?-->
        </div>
    </li>
    <li>
        <div>
            <p>Trousers</p>
            <p>Price:$50</p>
            <p>Quantity:5</p>
        </div>
    </li>
</ul>
</div>

JSFiddle

Answer 1

您可以使用不同ID fel和wel的2个顶级元素，因此需要使用#wel div, #fel div来查找类别div元素，然后需要使用{{3找到p

＆＃13;

$("#wel div, #fel div").each(function (index, element) {
    if ($(this).find('p:nth-of-type(1)').html().trim() == "Tie") {
        $(this).find('p:nth-of-type(3)').css('background-color', 'red');
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fel">Category1
  <li>
    <div>
      <p>Shirt</p>
      <p>Price:$25</p>
      <p>Quantity:20</p>
      <!--find this?-->
    </div>
  </li>
  <li>
    <div>
      <p>Tie</p>
      <p>Price:$10</p>
      <p>Quantity:10</p>
    </div>
  </li>
  <li>
    <div>
      <p>Trousers</p>
      <p>Price:$50</p>
      <p>Quantity:5</p>
    </div>
  </li>
</div>
<div id="wel">Category2
  <li>
    <div>
      <p>Shirt</p>
      <p>Price:$25</p>
      <p>Quantity:20</p>
    </div>
  </li>
  <li>
    <div>
      <p>Tie</p>
      <p>Price:$10</p>
      <p>Quantity:10</p>
      <!--find this?-->
    </div>
  </li>
  <li>
    <div>
      <p>Trousers</p>
      <p>Price:$50</p>
      <p>Quantity:5</p>
    </div>
  </li>
</div>

＆＃13;

您也可以

$("#wel div, #fel div ").each(function (index, element) {
    var $ps = $(this).find('p');
    if ($ps.eq(0).html().trim() == "Tie") {
        $ps.eq(2).css('background-color', 'red');
    }
})

演示：.find()

Answer 2

以下是执行此操作的一般方法

$(document).ready(function(){
    var div = $('p:contains("Tie")').parent()
    $('p:contains("Tie")').parent()
    var price = $(div).find("p:contains('Price')").css('background-color','red');
    console.log(price)

});

请参阅小提琴here

如何找到第n个p元素？

2 个答案: