使用Jquery编辑类

Editing a Class with Jquery

本文关键字：编辑 Jquery 使用      更新时间：2024-01-30

尽管听起来很奇怪，但我有一个完整的url作为我的一些html元素的类。显然，这对css puposes不起作用。我想做的是删除除了页面碎片之外的所有东西。这是我目前拥有的一个例子。

<li class="menu-item http://example.com/page-link/">some code</li>

就html而言，我想最终得到的是：

<li class="menu-item page-link">some code</li>

我正在考虑使用.replacement方法来替换"http://example.com/"除了删除尾部斜杠和url的开头，我什么都没有。这是我的想法。

var strclass = $(li[class*=http://example.com/]).attr('class').match(/'bhttp://example.com/.+?'b/);
var newclass = strclass.replace("http://example.com/", "").replace("/", "")

感谢您的帮助。如果我上面的代码走错了方向，请提供你认为我应该找的地方的链接。

******我正在尝试一些新的东西，并寻求更多的反馈！******

这是我结合您的一些绝妙想法编写的新代码。

if(li.hasClass('menu-item')) {
   var strclass = $('li.menu-item').attr('class');
   var newclass = strclass.split(" ")[1].split("/")[3];
   $(".menu-item").removeClass("http://example.com/" + strclass + "/").addClass(newclass);
}

我现在遇到的问题是if语句中的第三行，我删除了带有完整url的旧类，并添加了只带有page slug的新类。如果有人知道如何实现这一点，或者其他可以做同样事情的事情，请告诉我。感谢大家的辛勤工作和及时回复！

这正是您正在尝试的：

var items = document.querySelectorAll("li.menu-item");
alert(items.length + " items with classes that need to be changed found.");
for(var i = 0 ; i < items.length; ++i){
   var classes = items[i].className.split(" ");
   items[i].className = classes[0] + " " + classes[1].split("/")[3];
   alert("New class attribute value is: " + items[i].className);
}
.menu-item { font-family:Arial; font-size:1.5em; }
.page-link { background-color: red; }
.something {background-color: green;}
.go-somewhere {background-color: yellow; }
<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/something/">some code</li>
<li class="http://example.com/go-somewhere/">some code</li>
<li class="menu-item http://example.com/go-somewhere/">some code</li>

var strclass = "menu-item http://example.com/page-link/";
var newclass = strclass.replace("http':'/'/.+'/(.+)'/", "$1");

现在我不知道这是否能解决你所有的问题，但听起来你太具体了。只需制作一个更通用的表达式，并替换类字符串的那部分。

如果你想要一些不那么贪婪的东西，只获取最后一个文件夹

var newclass = strclass.replace("http':'/'/.+'/([^'/]+)'/", "$1");

您可以使用斜线来构建数组：

url = url.split("/");

然后获取段塞，它将是数组中的最后一个或倒数第二个元素，具体取决于是否有拖尾元素。

if (url[url.length - 1]) {
  slug = url[url.length - 1];
} else {
  slug = url[url.length - 2];
}

我可能会用这个正则表达式替换：/.*?([^/]+)'/?$/

$('li[class*="http://"]').each(function(){
  var pattern = new RegExp('^https?://');
  var classes = this.className.split(' ');
  for(var i = 0, len = classes.length; i < len; i++) {
    if(pattern.test(classes[i])) {
      classes[i] = classes[i].replace(/.*?([^/]+)'/?$/, '$1');
    }
  }
  this.className = classes.join(' ');
});
.page-link {color: green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>

请注意，我的解决方案有一个针对http和https进行测试的regex（不包括//example.com/whatever/语法和相对url），但jQuery选择器只获取http链接列表项。您可能应该为此创建一个类。类似linked-list-item之类的东西。

相关文章：