Как изменить href для гиперссылки, используя jQuery
изменит href всех гиперссылок, чтобы указать на Google. Вы, вероятно, хотите еще более изысканный селектор. Например, если у вас есть ссылка ссылок на ссылки (гиперссылка) и ссылка (или «якорь») якорных тегов:
. Тогда вы, вероятно, не хотите случайно добавлять атрибуты href к ним. Для безопасности тогда мы можем указать, что наш селектор будет соответствовать только тегам с существующим атрибутом href :
Конечно, у вас, вероятно, есть что-то более интересное. Если вы хотите сопоставить якорь с определенным существующим href , вы можете использовать что-то вроде этого:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
Здесь будут найдены ссылки, где href точно соответствует строке http://www.google.com/ . Более сложная задача может быть сопоставлена, а затем обновляется только часть href :
$("a[href^='http://stackoverflow.com']") .each(function() < this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, "http://stackoverflow.com"); >);
Первая часть выбирает только ссылки, где href начинается с http://stackoverflow.com . Затем определяется функция, которая использует простое регулярное выражение для замены этой части URL новой. Обратите внимание на гибкость, которую это дает вам — здесь можно было бы внести какие-либо изменения в ссылку.
«в HTML имена элементов нечувствительны к регистру, но в XML они чувствительны к регистру». — w3.org/TR/CSS21/selector.html
Для полноты, поскольку это все еще время от времени связано, я добавлю, что начиная с jQuery 1.4, последний пример не требует использования each — теперь возможно следующее: $(selector).attr(‘href’, function() < return this.replace(/. /, '. '); >);
@DavidHedlund Небольшое исправление: вы пропустили href : . return this.href.replace(/. /, ‘. ‘); >);
С jQuery 1.6 и выше вы должны использовать:
$("a").prop("href", "http://www.jakcms.com")
Разница между prop и attr заключается в том, что attr захватывает атрибут HTML, тогда как prop захватывает свойство DOM.
Вы можете найти более подробную информацию в этом сообщении: .prop() vs.attr()
Было бы attr получить объяснение, почему вы должны использовать prop over attr , для тех, кто придет к вопросу и обнаружит, что attr очевидно, прекрасно работает в новых версиях jQuery .
@womble использует prop быстрее, чем attr потому что обновляет dom, а не модифицирует HTML. jsfiddle.net/je4G5
@Popnoodles Есть больше вопросов, чем это, но было бы слишком долго, чтобы объяснить все их здесь. Так что читатели должны просто взглянуть на сообщение, связанное с Womble. Тем не менее, резюме здесь было бы неплохо, в противном случае эта часть информации вроде бы теряется ..
Используйте метод attr для поиска. Вы можете отключить любой атрибут с новым значением.
$("a.mylink").attr("href", "http://cupcream.com");
Это сработало для меня, если я установил в теге a. Просто хотел уточнить, что в случае, если кто-то попытается установить name = «mylink» аналогично ответу выше и ожидать, что это сработает.
В зависимости от того, хотите ли вы изменить все идентичные ссылки на что-то еще или вы хотите контролировать только те, что указаны в данном разделе страницы или каждый отдельно, вы можете сделать один из них.
Измените все ссылки на Google, чтобы они указывали на Карты Google:
$("a[href='http://www.google.com/']").attr('href', 'http://maps.google.com/');
Чтобы изменить ссылки в данном разделе, добавьте класс div контейнера в селектор. Этот пример изменит ссылку Google в содержании, но не в нижнем колонтитуле:
. link to Google in the content.
Links: Google $(".content a[href='http://www.google.com/']").attr('href', 'http://maps.google.com/');
Чтобы изменить отдельные ссылки независимо от того, где они попадают в документ, добавьте идентификатор в ссылку, а затем добавьте этот идентификатор в селектор. В этом примере будет изменена вторая ссылка Google в контенте, но не первая или нижняя колонтитула:
. link to Google in the content.
. second link to Google in the content.
Links: Google $("a#changeme").attr('href', 'http://maps.google.com/');
Несмотря на то, что OP явно задал ответ на jQuery-ответ, в наши дни вам не нужно использовать jQuery.Суб >
Несколько методов без jQuery:
var anchors = document.querySelectorAll('a'); Array.prototype.forEach.call(anchors, function (element, index) < element.href = "http://stackoverflow.com"; >);
var anchors = document.querySelectorAll('a[href]'); Array.prototype.forEach.call(anchors, function (element, index) < element.href = "http://stackoverflow.com"; >);
var anchors = document.querySelectorAll('a[href*="google.com"]'); Array.prototype.forEach.call(anchors, function (element, index) < element.href = "http://stackoverflow.com"; >);
var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]'); Array.prototype.forEach.call(anchors, function (element, index) < element.href = "http://stackoverflow.com"; >);
.. нет необходимости в регулярном выражении, в большинстве случаев.
Этот фрагмент вызывает, когда нажата ссылка класса ‘menu_link’, и отображается текст и URL ссылки. Возврат false предотвращает слежение за ссылкой.
Option 1 Option 2 $('.menu_link').live('click', function() < var thelink = $(this); alert ( thelink.html() ); alert ( thelink.attr('href') ); alert ( thelink.attr('rel') ); return false; >);
Я не слишком педантичен в отношении отрицательного голосования, но если вы не собираетесь говорить, почему отказываетесь в голосовании, ничего не достигается, и вам не стоит об этом беспокоиться.
Проголосовано, потому что ваш фрагмент и ответ не отвечают на исходный вопрос и не дают никакого объяснения того, почему информация, полученная с помощью фрагмента, полезна.
Вниз голосование это педантично. Он / она, возможно, не приложил столько усилий для своего ответа, как другие пользователи, но он действительно предоставил код для решения проблемы. ОП просто нужно немного подумать, кроме копирования и вставки нестандартного решения.
Прекратите использовать jQuery только ради этого! Это так просто с использованием JavaScript.
document.querySelector('#the-link').setAttribute('href', 'http://google.com');
Простой способ сделать это:
Функция Attr (начиная с версии jQuery версии 1.0)
$("a").attr("href", "https://stackoverflow.com/")
Функция Prop (с версии jQuery 1.6)
$("a").prop("href", "https://stackoverflow.com/")
Кроме того, преимущество вышеописанного заключается в том, что если селектор выбирает одиночный якорь, он будет обновлять только этот привязку, и если селектор вернет группу якоря, он обновит конкретную группу только с помощью одного оператора.
Теперь есть много способов определить точный якорь или группу якорей:
Довольно простые:
- Выберите имя тега с привязкой: $(«a»)
- Выберите привязку через индекс: $(«a:eq(0)»)
- Выберите привязку для определенных классов (как в этом классе только привязывается с active классом): $(«a.active»)
- Выбор якорей с определенным идентификатором (здесь в примере ID profileLink ): $(«a#proileLink»)
- Выбор первого якоря href: $(«a:first»)
Более полезные:
- Выбор всех элементов с атрибутом href: $(«[href]»)
- Выбор всех якорей с определенным href: $(«a[href=’www.stackoverflow.com’]»)
- Выбор всех якорей, не имеющих определенного href: $(«a[href!=’www.stackoverflow.com’]»)
- Выбор всех якорей с href, содержащих определенный URL: $(«a[href*=’www.stackoverflow.com’]»)
- Выбор всех якорей с помощью href, начинающихся с определенного URL: $(«a[href^=’www.stackoverflow.com’]»)
- Выбор всех якорей с href, заканчивающийся определенным URL: $(«a[href$=’www.stackoverflow.com’]»)
Теперь, если вы хотите изменить определенные URL-адреса, вы можете сделать это как:
Например, если вы хотите добавить прокси-сайт для всех URL-адресов google.com, вы можете реализовать его следующим образом:
$("a[href^='http://www.google.com']") .each(function() < this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) < return "http://proxywebsite.com/?query info"> Aman Chhabra Поделиться