pull all info inside li by searching for a specific value inside it

hello I am working a chrome extension that controls a website and there are these lists:

It looks like this:

<ul class="styles">
<li></li>
<li></li>
<li></li>
etc..


each li contains custom data

I want to be able to pull all the data inside the one I want by seaching for its

data-style-name= "Orange"
href="/example"


I want to be able to search for which li's data--style-name= "Orange"

then pull a specific result from it like the href=

so something like this:

const searchStr = "orange";
const lowerSearchStr = searchStr.toLowerCase();
const foundItem = (ul .styles all the lis??).find(
( data-name ) => data-name.toLowerCase().includes(lowerSearchStr)
);


something like that would work I think.

I want to find the data-name maybe with a keyword as well as the full name

but then pull the specific href thats inside the found li.

Thank You for taking the time to read this and I would really appreciate it if you could help me out ;) <3

li

li

href

querySelector

2 Answers
2

If you want it to be purely in javascript and below code is same as you have in your screenshot,

search_str = "orange";
search_attr_name = "data-style-name";
var all_styles = my_document.querySelectorAll("[data-style-name]");
matching_url = "";

if(all_styles.length)
all_styles.forEach(function(e)
var data_style_name = e.attributes[search_attr_name].value;
console.log("TEST data_style_name: ", data_style_name);

if(data_style_name.length && data_style_name.toLowerCase().indexOf(search_str) > -1)

if(typeof e.attributes["href"].value !== "undefined")
matching_url = e.attributes["href"].value


);

console.log("matching_url: " + matching_url);



You will need to process each li, as like this,

$("li").each(function()
allDatas = $(this).data();
search_str = "left";

$.each(allDatas, function(key, val)
if(val.length && val.indexOf(search_str) > -1)
console.log(val);

);


);

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.