如何找到第n个p元素？

Question

I want to find the 3rd p tag of each category, based on first p tag's value. eg The first p tag value is Tie , then find the quantity of it.

If the html element tree should be formatted in a better way, I am open to it. The html for all ul is written from code behind at C# to load items from database.

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

You can 2 top level elements with different ids fel and wel so need to use #wel div, #fel div to find the category div elements, then need to use .find() to find the 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> 

---

You can also do

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

Demo: Fiddle

Answer 2

Here's the generic way of doing it

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

});

Please refer the fiddle here