如何在具有jQuery的UL中查找具有特定内容的LI？

Question

In the following UL with id of CP_main_approvalist I want to find the LI that has " Awating authorisation " string and to extract that text from it:

There can be many LI s in that UL . In this case there are only two.

Answer 1

You can access it by: $("#CP_Main_approvalList li:contains('Awating authorisation')") ,

So something like this:

 $("#CP_Main_approvalList li:contains('Awating authorisation')").css('color', 'red'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="CP_Main_approvalList"> <li>1. Authorised by...</li> <li>2. Awating authorisation from....</li> </ul> 

To extract the text from the specified LI you will have to call a text() method on the resulting set:

$("#CP_Main_approvalList li:contains('Awating authorisation')").text()

But you have to be careful, since if there is more than one LI with such text, it will extract it from all the matching elements. In order to extract only from the first one use:

$("#CP_Main_approvalList li:contains('Awating authorisation')").first().text()

Or :eq(idx) ( idx is 0-based) selector, instead of first() to pick the element with some other index.

UPDATE

So far it was the direct answer to your question, but in general this technique is far from the best practice, provides bad performance (query selector has to look inside every LI and match the actual text) and is prone to potential future errors (what if someone decides to change that text - the whole extraction logic will break). Consider adding appropriate class name or data attribute to the corresponding elements ( authorized and authorizing for example) and differentiate between them by it.

Answer 2

You can try this by using children or has function like below:

$("#CP_Main_approvalList").children("li contains('Awating authorisation')").prop('innerHTML');

OR

$("#CP_Main_approvalList").has("li contains('Awating authorisation')").prop('innerHTML');

Answer 3

You can select the ul by using the id selector:

$("#CP_Main_approvalList")

Then, add the li and make sure it contains the text you need

li:contains('Awaiting authorisation')

And to make sure it works I changed the text color...

 $("#CP_Main_approvalList li:contains('Awaiting authorisation')").css("color", "green"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="CP_Main_approvalList"> <li>1. Authorised by ..... </li> <li>2. Awaiting authorisation from ..... </li> </ul>