使用Jquery编辑类 [英] Editing a Class with Jquery

问题描述

这么奇怪，因为这听起来我有一个完整的网址作为一些类的一些我的html元素。显然这不适用于css puposes。我想要做的是删除除了页面remove之外的每一件事。以下是我目前的示例。

So as weird as this sounds I have a full url as a class for some of my html elements. Obviously this doesn't work for css puposes. What I am looking to do is remove every thing except the page slug. Here is an example of what I have currently.

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

到html为止，我想要的最终结果是：

What I would like to end up with as far as html goes is this:

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

我在想使用.replace方法替换 http://example.com/ ，但我没有删除尾部斜杠和网址的开头。这是我的想法。

I was thinking of using the .replace method to replace the "http://example.com/" with nothing but I am at a loss for removing the trailing slash and the beginning of the url. Here is my idea.

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

任何帮助。如果我使用我的代码在完全错误的方向，请提供链接到你认为我应该看的地方。

Any help is appreciated. If I am going in the complete wrong direction with my code above please provides links to where you think I should be looking.

******我在尝试某事新的和寻找更多的反馈！******

******I am trying something new and looking for more feedback!******

这是我通过组合一些你的美好的想法编译的新代码。

This is my new code I have compiled by combining some of your wonderful ideas.

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语句其中我删除旧类与完整的网址，并添加只有页面slug的新类。如果任何人有一个想法，如何做这项工作或别的，将做同样的事情，请让我知道。

The issue I am having with now is the third line inside of the if statement where I remove the old class with the full url and add the new class with only the page slug. If anyone has an idea of how to make that work or something else that would do the same thing please let me know. Thank you all for your hard work and prompt responses!

推荐答案

这只是你尝试的：

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>

这篇关于使用Jquery编辑类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！