CODEWITHSUNDEEP
javascriptjqueryhtml
aspiring
aspiring

Reputation: 1647

How to find nth p element?

I want to find the 3rd p tag of each category, based on first p tag's value. e.g. 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

Upvotes: 0

Views: 283

Answers (2)

Amal Dev
Amal Dev

Reputation: 1978

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 2

Related Questions