JQuery - 替换以前的父元素

Question

我在下表中使用jquery：

＆＃13;

＆＃13;

targetButton = $(".btn.btn-danger.btn-sm.motherboard")
let targetButtonParent = targetButton[0].parentElement
targetButtonParent.remove()

targetButtonParent.insertAdjacentHTML('beforebegin', `
    <td>    
        <img src="" alt="" height="42" width="42">
            <a href="">Awesome title to replace!</a>
    </td>    
`)

targetButton.attr('class', 'btn btn-danger btn-sm motherboard'); // change button class to red

targetButton.text(function() {
  return $(this).text().replace("Add", "Edit");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>CPU</td>
      <td>
        <button type="button" data-exists="cpu" class="btn btn-primary btn-sm cpu">Add CPU</button>
      </td>
    </tr>
    <tr>
      <td>Motherboard</td>

      <td>
        <img src="//img.jpeg" height="42" width="42">
        <a href="www.link.com">Test Title</a>
      </td>
      <td>
        <button type="button" data-exists="motherboard" class="btn btn-danger btn-sm motherboard">Edit Motherboard</button>
      </td>
    </tr>
    <tr>
      <td>Graphic Card</td>
      <td>
        <button type="button" data-exists="graphic-card" class="btn btn-primary btn-sm graphic-card">Add Graphic Card</button>
      </td>
    </tr>
    <tr>
      <td>Power Supply&nbsp;</td>
      <td>
        <button type="button" data-exists="power-supply" class="btn btn-primary btn-sm power-supply">Add Power Supply</button>
      </td>
    </tr>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

如您所见，我的代码替换了button元素。相反，我想替换我的html表的内部列。我正在寻找一种方法来实现以下输出：

在jquery中有没有办法替换上一个父元素？

有什么建议我做错了吗？

Answer 1

#Python3 from urllib.parse import unquote string = unquote('УРЛ') #Python2 import urllib url='УРЛ' urllib.unquote(url).decode('utf8') 正在删除父元素，因此targetButtonParent.remove()将无法找到父元素。您似乎要删除targetButtonParent.insertAdjacentHTML

targetButton

targetButton = $(".btn.btn-danger.btn-sm.motherboard")
let targetButtonParent = targetButton[0].parentElement;
targetButton.remove();
//targetButtonParent.remove()
targetButtonParent.insertAdjacentHTML('beforebegin', `
                <td>    
                   <img src="" alt="" height="42" width="42">
                    <a href="">
                        Awesome title to replace!
                    </a>
                </td>    
            `)

targetButton.attr('class', 'btn btn-danger btn-sm motherboard'); // change button class to red

targetButton.text(function() {
  return $(this).text().replace("Add", "Edit");
});

Answer 2

从您发布的图片中，您似乎想要替换“编辑主板”按钮的上一个单元格的内容。 您需要选择其内容需要替换的元素。

(<ColoredBox><Box /></ColoredBox>)

Answer 3

## A list coerced into a data.frame without the right attributes wrong_list <- list(c(1,2,3), c(3,2,1)) attr(wrong_list, "class") <- "data.frame" wrong_list #> NULL #> <0 rows> (or 0-length row.names) 是包裹按钮的targetButton[0].parentElement，因此您选择了错误的目标。

<td>这是

的目标

targetButton[0].parentElement.previousElementSibling

这是您要替换的正确目标。

并且，<td> <img src="//img.jpeg" height="42" width="42"> <a href="www.link.com">Test Title</a> </td> 将插入

insertAdjacentHTML

之后。因此，您必须在插入后删除目标，否则，它将抛出一个错误，指出此元素没有父节点导致您已将其删除。

<td>    
    <img src="" alt="" height="42" width="42">
    <a href="">Awesome title to replace!</a>
</td> 

targetButton = $(".btn.btn-danger.btn-sm.motherboard")

let targetButtonParent = targetButton[0].parentElement.previousElementSibling

targetButtonParent.insertAdjacentHTML('beforebegin', `
                <td>    
                   <img src="" alt="" height="42" width="42">
                    <a href="">
                        Awesome title to replace!
                    </a>
                </td>    
            `)

targetButtonParent.remove()

targetButton.attr('class', 'btn btn-danger btn-sm motherboard'); // change button class to red

targetButton.text(function() {
  return $(this).text().replace("Add", "Edit");
});