Question

<html>
<body>
<div class="Parent">
    <div id="child-1" class="post-1">
        <header class="aheader">
           <div class="target">
               <a href="http://example.com/author/user1/">user1</a>
           </div> 
        </header>
    </div>
    <div id="child-2" class="post-2">
        <header class="aheader">
           <div class="target">
               <a href="http://example.com/author/user2/">user1</a>
           </div> 
        </header>
    </div>
    <div id="child-3" class="post-3">
        <header class="aheader">
           <div class="target">
               <a href="http://example.com/author/user2/">user1</a>
           </div> 
        </header>
    </div>
    <div id="child-4" class="post-4">
        <header class="aheader">
           <div class="target">
               <a href="http://example.com/author/user3/">user1</a>
           </div> 
        </header>
    </div>
</div>
</body>
</html>

要求： 1）我想针对每个类=＆＃34; target＆＃34;通过迭代，以便更改href以从href中删除作者，使得respetive hrefs为：

http://example.com/user1
http://example.com/user2and so on

这就是我在Jquery中尝试过的：

$(".parent > div").each(function() {
var authorlink = $("div > header > target  > a").attr("href").substring(0,19) + $(""div > header > target  > a"").attr("href").substring(26);
$("div > header > target  > a").attr("href", authorlink);
});

（不受欢迎的）结果：所有目标元素都分配了href：http://example.com/

显然正在发生的事情：

First iteration: all elements are getting assigned http://example.com/user1 and so following this
Second iteration: all elements are getting assigned http://example.com/
Third iteration: all elements are getting assigned http://example.com/
Fourth iteration: all elements are getting assigned http://example.com/

限制： 1）我无法改变这个php生成的结构（wordpress） 2）div id = child-1，div id = child-2等由用户干预动态添加

帮助： 1）我做错了什么？ 2）.each（）是否正确使用？ 3）非常感谢详细的帮助，因为我只是一个新手。

Answer 1

试试这个：

$('div[class^="post"]').find('a').each(function(){
    $(this).attr('href', $(this).attr('href').replace(/\/author/, ''));
});

为什么您的解决方案没有按预期工作

我注意到的一个主要问题是你的每个循环内部。您只是引用$（“div＆gt; header＆gt; target＆gt; a”），它将为您提供页面上与该定义匹配的所有div的数组。

如果你真的想这样做，你应该将它作为你的主循环元素：

$("div > header > target  > a").each(function(){

然后使用$(this)

在迭代期间引用匹配的元素

var authorlink = $(this);
//etc...

你真的过于复杂的事情而且很简单，这似乎是由于你对jQuery如何与DOM交互的误解。我建议你挖掘jquery选择器文档，直到你的眼睛流血。它将是一个很好的资源：http://api.jquery.com/category/selectors/

我在顶部提供的代码是通过使用正则表达式来简化您所尝试的内容的简化版本，这样我们只替换与我们想要替换的内容完全匹配的内容，而不是基于子字符串的猜测

您还应该阅读有关RegExp的更多信息：http://www.regexr.com/

如果您有任何其他问题，请与我们联系。

Answer 2

$('div[class="target"] a').each(function(){
alert($(this).prop('href').replace('/author', ''));
});

使用.each（）在Jquery中以不同方式定位每个子节点

2 个答案:

为什么您的解决方案没有按预期工作