通过在其中搜索特定值来拉取li内的所有信息

Question

您好我正在使用控制网站的Chrome扩展程序，并且有以下列表：

它看起来像这样：

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

每个li包含自定义数据

我希望能够通过搜索来获取我想要的所有数据

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

我希望能够搜索哪个li的数据 - style-name =“Orange”

然后像href =那样从中拉出一个特定的结果

所以这样的事情：

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

我想这样的事情会起作用。

我想找到数据名称可能与关键字以及全名

但然后拉出找到的li里面的特定href。

感谢您花时间阅读本文，如果您能帮助我，我将非常感激;）<3

Answer 1

如果您希望它纯粹是在javascript中，而下面的代码与截图中的相同，

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); 
}

Answer 2

您将需要处理每个li，就像这样，

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

});