Question

只有我的干草堆是属性值而不是元素。考虑以下DOM剪辑：

<a href="http://google.com/path/to/file/file.png">link</a>
<a href="http://google.com/path/to/file/file.png">link1</a>
<a href="http://google.com/path/to/file/file.png">link2</a>

我想遍历整个文档，寻找google.com的引用，用another.com替换这些引用。我应该能够在控制台中运行它，并立即更新和显示路径。

这是我的抨击：

jQuery(document).find("a").each(function(i,j){
 $_this = jQuery(this).attr('href');
 $_this.replace('http://google.com', 'https://another.com');
 //console.log($_this);
});

Answer 1

您已成功替换了该值。你只是忘了将结果分配给任何东西......

$_this = jQuery(this).attr('href');
$_that = $_this.replace('http://google.com', 'https://another.com');
jQuery(this).attr('href', $_that);

Answer 2

仅选择<a>以href=开头的http://google.com/代码，然后无需为变量指定值。

$('a[href^="http://google.com/"]').each(function(element){
    $(this).attr(
        'href', 
        $(this).attr('href').replace(
            'http://google.com',
            'https://another.com'
        )
    );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com/path/to/file/file.png">link</a>
<a href="http://google.com/path/to/file/file.png">link1</a>
<a href="http://google.com/path/to/file/file.png">link2</a>

和普通的javascript一样：

document.querySelectorAll('a[href^="http://google.com/"]').forEach(
    function(element){
        element.href = element.href.replace(
            'http://google.com',
            'https://another.com'
        );
    }
);

<a href="http://google.com/path/to/file/file.png">link</a>
<a href="http://google.com/path/to/file/file.png">link1</a>
<a href="http://google.com/path/to/file/file.png">link2</a>

Answer 3

所以选择每个元素都有点矫枉过正，如何简单地选择你想要改变的元素呢？然后，继续改变它们？

// get only those elements point at google
$("[href*='google.com']").each(function() {
  // change their url string via regex
  var myUrl = $(this).attr("href")
    .replace(/http:\/\/google.com/gi, "https://foo.org")
  // update the url on the el, and show it.
  //  just so you see SOMETHING happened.
  $(this).attr("href", myUrl)
    .text("my link is now " + myUrl);
})

a {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com/path/to/file/file.png">link</a>
<a href="http://google.com/path/to/file/file.png">link1</a>
<a href="http://google.com/path/to/file/file.png">link2</a>

在大海捞针更换针

3 个答案: