2012-05-02 3 views
0

я нашел хороший snippet здесь на Stack, который захватывает текст из ссылки и присоединяет его к тегу, как класса:Добавление класса на основе содержания текста ссылки

$('a.nav').each(function() { 

    // add class with name of the link's text 
    $(this).addClass($(this).text()); 
}); 

Он отлично работает за исключением того, что я есть список связанных результатов поиска, которые выводят (numbers), e.g. (19) после текста ссылки.

Так структура моего HTML после JQuery выше применяется как таковой:

<li><a class="Basic page (1)" href="#">Basic page (1)</a></li> 
<li><a class="Blog (19)" href="#">Blog (19)</a></li> 
<li><a class="News (4)" href="#">News (4)</a></li> 

Как вы можете видеть, это не идеал. Если возможно, я хотел бы, по крайней мере, избавиться от числа в параграфах, то есть (1), (19) и т. Д., А затем положить тире и текст и строчный регистр. Обратите внимание, что это результат граненного поиска, поэтому ссылки никогда не будут вместе или в одном порядке. Я просто пытаюсь применить динамические классы на основе текстового имени ссылки, чтобы я мог делать другие вещи в будущем в тематической области.

так это:

<li><a class="Basic page (1)" href="#">Basic page (1)</a></li> 

... стал бы это:

<li><a class="basic-page" href="#">Basic page (1)</a></li> 
+0

Есть ли конкретная причина, вам это нужно? Это звучит очень запутанно. Вы можете использовать 'index' элемента' li' для их идентификации. –

+0

@RoryMcCrossan проблема в том, что они являются результатами поиска для гранжевого поиска, поэтому никогда не появятся вместе или в том же порядке. –

ответ

2

Попробуйте что-то вроде ниже,

DEMO

$(function() { 
    $.each($('ul li a'), function() { 
     var text = $(this).text(); 
     this.className = $.trim(text.replace(/\(\d*\)/g, '').toLowerCase()).replace(/\s/, '_'); 
    }); 
}); 
+0

Здесь были отличные ответы, но мне это нравится! Благодарю. –

1

Я нашел небольшую функцию here. С его помощью я думаю, что ниже код будет работать для вас;

HTML:

<ul> 
    <li><a href="#" class="nav">Basic page (1)</a></li> 
    <li><a href="#"class="nav">Blog (19)</a></li> 
    <li><a href="#"class="nav">News (4)</a></li> 
</ul> 

Javascript:

function string_to_slug(str) { 
    str = str.replace(/^\s+|\s+$/g, ''); // trim 
    str = str.toLowerCase(); 

    // remove accents, swap ñ for n, etc 
    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; 
    var to = "aaaaeeeeiiiioooouuuunc------"; 
    for (var i=0, l=from.length ; i<l ; i++) { 
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); 
    } 

    str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars 
    .replace(/\s+/g, '-') // collapse whitespace and replace by - 
    .replace(/-+/g, '-'); // collapse dashes 

    return str; 
} 

jQuery(function($) { 
    $('a.nav').each(function() { 

     // add class with name of the link's text 
     $(this).addClass(string_to_slug($(this).text())); 
    }); 
}); 

Пример: http://jsfiddle.net/CjdsG/

3

некоторые основные регулярное выражение будет получить формат, который вы ищете.

$('a.nav').each(function() { 

    // add class with name of the link's text 
    $(this).addClass($(this).text() 
     .toLowerCase() 
     .replace(/(\s\(\d+\))/, '') // replaces ' ([digit(s)])' 
     .replace(/\s+/g, '-')); // replaces spaces with dashes 
}); 
1
$('a.nav').each(function() { 
    var oSelf = $(this); 
    var sClass = oSelf.html() 
     .toLowerCase() 
     .replace(/(\w)(\W\([0-9]+\))/, '$1') 
     .replace(' ', '-'); 
    oSelf.addClass(sClass); 
}); 
Смежные вопросы