[javascript] jQuery를 사용하여 하이퍼 링크의 href를 변경하는 방법

jQuery를 사용하여 하이퍼 링크의 href를 어떻게 변경할 수 있습니까?

답변

사용

$("a").attr("href", "http://www.google.com/")

Google을 가리 키도록 모든 하이퍼 링크의 href를 수정합니다. 그래도 좀 더 세련된 선택기를 원할 것입니다. 예를 들어, 링크 소스 (하이퍼 링크)와 링크 대상 (일명 “앵커”) 앵커 태그가 혼합 된 경우 :

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

그런 다음 실수로 href속성을 추가하고 싶지 않을 것입니다. 안전을 위해 선택기가 <a>기존 href속성 이있는 태그 만 일치하도록 지정할 수 있습니다 .

$("a[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의이 부분을 새로운 것으로 대체하는 함수가 정의됩니다. 이것이 제공하는 유연성에 유의하십시오. 링크에 대한 모든 종류의 수정이 여기에서 수행 될 수 있습니다.

답변

jQuery 1.6 이상에서는 다음을 사용해야합니다.

$("a").prop("href", "http://www.jakcms.com")

차이 prop와 attr즉 attr반면 HTML 속성 움켜 prop잡는다 DOM 속성.

이 게시물에서 자세한 내용을 찾을 수 있습니다 : .prop () vs .attr ()

답변

attr조회 에서 방법을 사용하십시오 . 새로운 값으로 속성을 전환 할 수 있습니다.

$("a.mylink").attr("href", "http://cupcream.com");

답변

동일한 링크를 모두 다른 것으로 변경 하려는지 또는 페이지의 특정 섹션에있는 링크 만 또는 개별적으로 링크를 제어 하려는지에 따라 이들 중 하나를 수행 할 수 있습니다.

Google지도를 가리 키도록 Google에 대한 모든 링크를 변경하십시오.

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');

주어진 섹션에서 링크를 변경하려면 컨테이너 div의 클래스를 선택기에 추가하십시오. 이 예제는 콘텐츠에서 Google 링크를 변경하지만 바닥 글에서는 변경하지 않습니다.

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');

문서에있는 위치에 관계없이 개별 링크를 변경하려면 링크에 ID를 추가 한 다음 해당 ID를 선택기에 추가하십시오. 이 예는 콘텐츠의 두 번째 Google 링크를 변경하지만 바닥 글의 첫 번째 링크는 변경하지 않습니다.

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/"
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href',
'http://maps.google.com/');

답변

_{OP가 명시 적으로 jQuery 답변을 요청했지만 요즘 모든 것에 jQuery를 사용할 필요는 없습니다.}

jQuery가없는 몇 가지 방법 :

모든 요소 의 href값 을 변경하려면 모든 <a> 요소를 선택한 다음 노드 목록 을 반복하십시오 . (예)

var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

실제로 속성 이있는 href모든 <a>요소 의 값 을 변경 href하려면 [href]속성 선택기 ( a[href])를 추가하여 선택하십시오 (예).

var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

당신이 변경하려는 경우 href의 값 <a>요소를 포함 예를 들어, 특정 값을 google.com, 속성 선택 사용 a[href*="google.com"]: (예)
```
var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});
```
마찬가지로 다른 속성 선택기를 사용할 수도 있습니다 . 예를 들어 :
- a[href$=".png"]값이로 끝나는 <a>요소 를 선택하는 데 사용할 수 있습니다 .href.png
- a[href^="https://"]선택하는 데 사용할 수 <a>와 요소 href된 값 접두어 로를 https://.

여러 조건을 만족하는 요소 의 href값 을 변경하려는 경우 <a>: (예)

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를 반환하면 링크가 따라 가지 않습니다.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

답변

그렇게하는 간단한 방법은 다음과 같습니다.

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
ID)로 앵커 선택 :$("a#proileLink")
첫 번째 앵커 href 선택 : $("a:first")

더 유용한 것들 :

href 속성을 가진 모든 요소 선택 : $("[href]")
특정 href를 가진 모든 앵커 선택 : $("a[href='www.stackoverflow.com']")
특정 href가없는 모든 앵커 선택 : $("a[href!='www.stackoverflow.com']")
특정 URL을 포함하는 href가있는 모든 앵커 선택 : $("a[href*='www.stackoverflow.com']")
특정 URL로 시작하는 href가있는 모든 앵커 선택 : $("a[href^='www.stackoverflow.com']")
href가 특정 URL로 끝나는 모든 앵커 선택 : $("a[href$='www.stackoverflow.com']")

이제 특정 URL을 수정하려는 경우 다음과 같이 할 수 있습니다.

예를 들어 google.com으로 이동하는 모든 URL에 프록시 웹 사이트를 추가하려는 경우 다음과 같이 구현할 수 있습니다.

$("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="+encodeURIComponent(x);
    });
   });