如何找到第n個p元素？

我想根據第一個p標籤的值找到每個類別的第3個p tag。例如第一個p標籤的值是Tie，然後找到它的數量。如何找到第n個p元素？

如果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

來源

2015-05-22 aspiring

你可以用不同的ID fel和wel 2頂級元素，因此需要使用#wel div, #fel div找到類別div元素，那麼就需要使用.find()找到p

$("#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'); 
 
    } 
 
})

<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>

你也可以做

$("#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'); 
    } 
})

演示：Fiddle

來源

2015-05-22 10:49:51

http://jsfiddle.net/arunpjohny/tctdan25/1/ –

放任聯合國紙箱！清潔。我還學習如何在html，javascript空間中提出問題並獲得正確的答案。我需要的是在一個特定的範疇內找到。所以最有可能的是我必須提供div ID。 – aspiring

這裏做

$(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

來源

2015-05-22 11:03:26

這可以使用'attr（'id'）'給父母div的id嗎？（例如#wel） – aspiring

如何找到第n個p元素？

回答

相關問題