字符串内的 CSS 选择器检查属性答案

【问题标题】：CSS selector check attribute inside string字符串内的 CSS 选择器检查属性
【发布时间】：2020-08-24 10:06:17
【问题描述】：

我正在寻找一个 CSS 选择器检查给定属性是否在一个值内。

例如：我有一个<a class="myClass" href="Administration/Menus"></a> 和一个值：Administration/Menus/Create

我的目标是选择所有 value 包含 href 内容的元素。

我尝试做以下$('.myClass [href*="' + value + '"]')

但这不起作用，因为我的 href 不包含值，而是 value 包含 href...

【问题讨论】：

应该是$('.myClass[href*="' + value + '"]')，因为只有一个元素，空格表示子元素
您能否举例说明如何找到要查找的内容以及匹配的位置。 “值包含href”和“href 不包含值，值包含href”在没有上下文的情况下没有多大意义。
我从 window.location.pathname 获得价值所以如果我的 url 在“Administration/Menus/Create”中，我想选择其 href 包含“Administration/Menus”的链接。
您是否还希望选择一个只有href="Administration" 的菜单？还是总是只删除路径的最后一部分？
只删除最后一部分。如果不是，我会遇到我会得到管理的情况，甚至只是“A”。

标签： jquery css

【解决方案1】：

您可以使用.filter 检查每个条目是否与输入匹配。

示例输入：Administration/Menus/Create

查找href在哪里Administration/Menus

"只删除最后一部分"

使用.split、.slice 和.join 删除最后一部分：

var lookfor = value.split("/").slice(0, -1).join("/")

然后.filter 和.indexOf 检查“查找”部分是否匹配

var value = "Administration/Menus/Create";

var lookfor = value.split("/").slice(0, -1).join("/")
$(".myClass")
  .filter(function() {
    return lookfor.indexOf($(this).attr("href")) >= 0
  })
  .css("color", "pink")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="myClass" href="Administration/Menus">menu</a>
<a class="myClass" href="Administration/Menus/Create">create</a>
<a class="myClass" href="Administration/Menus/Delete">delete</a>

【讨论】：