用jquery編輯一個類

所以這聽起來很奇怪，我有一個完整的url作爲我的一些html元素的類。顯然，這不適用於css puposes。我期望做的是刪除除了頁面slu every之外的所有東西。這是我目前的例子。用jquery編輯一個類

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

我想用盡可能HTML去最終是這樣的：

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

我想用.replace方法的什麼也沒有取代「http://example.com/」但我無法刪除尾部斜線和網址的開頭。這是我的想法。

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刪除舊的階級和只在網頁塞添加新的類內的第三行。如果任何人有了如何做這項工作的想法或其他可以做同樣事情的事情，請告訴我。謝謝大家的辛勤工作和迅速回應！

來源

2016-04-06 Tim Fell

聽起來很奇怪。你爲什麼把URL作爲類？ –

是否始終使用相同的域名？ – Stuart

@Maulzal由於我使用的平臺（BigCommerce），添加動態生成的唯一類到此列表的唯一方法之一我正在處理的是通過拉動類別名稱或其URL。名字包含對立和空格，所以它們不能像CSS類那樣工作。另一方面，URL刪除大寫字母，符號並用連字符替換空格。如果我可以刪除其他所有內容，所有這些都會創建獨特的和css友好的類。 –

這確實要嘗試正是：

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>

來源

2016-04-06 20:09:05

我認爲像這樣的東西可以工作，但有一大堆項目的類以「http://example.com/」開頭，但在其末尾有不同的頁面段落，例如「http：// example」。 COM /頁-LINK-2" 。我將如何將你的方法應用於所有人？ –

只要你在尋找「http // example.com /」之後的URL，結局如何就不重要了。查看我的更新答案的例子。 –

所以我想結合我最初的想法和你的想法 –

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

現在我不知道這是否會解決所有的問題，但它聽起來像是你只是過於具體。只需製作一個更通用的表達式，並替換類字符串的那部分。

如果你想要的東西少一點貪心，只得到了最後一個文件夾

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

來源

2016-04-06 20:09:48 bronkula

您可以使用斜線構建一個數組：

url = url.split("/");

然後得到這將是蛞蝓或者是數組中的最後一個或倒數第二個元素，取決於是否存在尾隨。

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

來源

2016-04-06 20:10:37

我可能會使用這個表達式用替換：/.*?([^/]+)\/?$/

$('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正則表達式（不包括//example.com/whatever/語法和相對URL），但jQuery選擇器只抓取http鏈接列表項。你可能應該爲此創建一個類。像linked-list-item或其他什麼的。

來源

2016-04-06 20:30:32

用jquery編輯一個類

回答

相關問題