替换 dom 元素中的属性值答案

【问题标题】：replace a attribute value in dom element替换 dom 元素中的属性值
【发布时间】：2019-03-12 19:11:59
【问题描述】：

我想将锚标记的属性之一替换为不同的值。我怎样才能做到这一点。我使用了 jquery 的replaceWith()，它将替换完整的锚标记本身而不是属性和字符串的“替换”方法无法使用它，因为我们不能在元素上调用它。

代码如下：

this.ui.$levels.each(function(i, el) {
            var $self = $(el),
......
..
}

这里self有html元素，我需要修改其中一个属性值。

attr() 的 jquery 应该可以。但问题是如果我使用$self.find('a').attr('id','val')，它将替换所有锚标记。我不知道要替换哪个锚，我需要搜索特定的 id，如果 id 存在，那么只有它应该替换。

例如：考虑 $self 包含以下代码 sn-p

  <div class="abc">
     <div class="xyz">
       <a href=# id="repplace_id"></a>
    </div>
   </div>

这里我需要将锚标签的 id 修改为其他值。请帮忙

感谢您的帮助。

非常感谢。

【问题讨论】：

如何使用$self.attr('href','new value');。只需将href 更改为您要更改的实际属性即可。
感谢您的回复。如果我使用 $self.attr('href','new value');或 $self.find('a').attr('id','new-id'); $self.find('a:first').attr('id', 'newValue');，它会修改接受的 id 但如果我在
中有另一个锚标记，它会添加一个属性 id .这就是面临的问题。例如：

。 attr() 如果存在则替换属性，如果不存在则添加属性。
我明白了。所以问题是您不知道要更改哪个a？如果有几个？
没错，无论 id 出现在哪里，我都需要放置它。
我建议您更新您的问题，因为它会导致所有当前答案错误或不完整。

标签： jquery attributes

【解决方案1】：

你可以像这样使用.attr()在jQuery中修改元素属性：

$self.find('a:first').attr('id', 'newValue');

【讨论】：

【解决方案2】：

尝试以下方法：

$(".xyz a").attr("id","new_id");

这将只替换 .xyz 类中的一个标签

【讨论】：

【解决方案3】：

这里有两种选择，具体取决于您的范围。

一种方法遍历 $levels 并更改 id 具有值的所有锚点。

另一种方法根据之前的 id 找到特定的锚。

但问题是如果我使用 $self.find('a').attr('id','val')，它会替换所有锚标记。我不知道要替换哪个锚，我需要搜索特定的 id，如果 id 存在，那么只有它应该替换。

根据上面的引用，您可能只想搜索 id-attribute 并在 sn-p 中使用 replaceSpecific-method。

var $levels = $('.abc');

replaceAllThatExists();
replaceSpecific('new-id', 'yetAnotherId');

// If you don't know the specific id, and only want to change all if not exists.
function replaceAllThatExists()
{
  $levels.each(function(i, el) {
  var $self = $(el);
  var $anchors = $self.find('a');
    $anchors.each(function(i, a){
      var $a = $(a);
      if($a.attr('id')) {
          var currentId = $a.attr('id');
          $a.attr('id', 'new-id');
          console.log('changed id from: ' + currentId + ' to ' + $a.attr('id'));
      }
    });
  });
}



// If you know the specific id
function replaceSpecific(id, newId) {
  $levels.find('[id="' + id + '"]').attr('id', newId);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="abc">
     <div class="xyz">
       <a href=# id="repplace_id1"></a>
       <a href=#>Does not have id</a>
    </div>
   </div>
  <div class="abc">
     <div class="xyz">
       <a href=#>Does not have id</a>
       <a href=# id="repplace_id2"></a>
    </div>
   </div>
  <div class="abc">
     <div class="xyz">
       <a href=# id="repplace_id3"></a>
    </div>
   </div>

【讨论】：

非常感谢。我会看看:-)

【解决方案4】：

试试这个：

$self.find('a').attr('href','new value');

它将在给定的 html 块中搜索 a 标签，并将 href 属性值按指定放置。

【讨论】：