Question

我正在寻找一些Javascript代码，这些代码会将REL属性添加到A链接元素中，然后将CLASS属性添加到其中的Button元素中。

<table>
<tbody>
<tr>
<td class="column-main">
Sample Text Here
</td>
<td class="column-url">
<a href="website.com"><button class="classNamehere">View</button></a>
</td>
</tr>
</tbody>
</table>

我希望目标中的A链接和Button元素可以将其更改为：

<a href="website.com" rel="iLightbox" ><button class="classNamehere fusion-lightbox-link">View</button></a>

这就是我尝试过的...

$('.column-url a').attr( 'rel', 'iLightbox' );
$('.column-url button').attr( 'class', 'fusion-lightbox-link' );

Answer 1

步骤1。获取参考

要编辑元素，首先需要一种方法来指定要编辑的元素。用程序员的话来说，这称为获取元素的 reference 。在JavaScript中有几种方法可以做到这一点。最常见的方法之一是使用document.getElementById()并为元素分配唯一的ID。例如，如果您这样修改HTML：

<table>
<tbody>
<tr>
<td class="column-main">
Sample Text Here
</td>
<td class="column-url">
<a id="my-link" href="website.com"><button class="classNamehere">View</button></a>
</td>
</tr>
</tbody>
</table>

然后，您可以使用以下代码来引用对<a>标签的引用：

var myLink = document.getElementById("my-link");

如果您没有编辑HTML的能力，那么仍有一些可用选项。例如，您可以使用document.getElementsByTagName()使用特定标签返回所有元素的数组。这样，您可以选择<table>并在其中寻找<a>标签：

var myLink = document.getElementsByTagName("table")[0].children[0].children[0].children[1];

请注意，这对页面的结构做出了一些假设：

我用table标签捕获了第0个（第一个）元素。假设此页之前没有其他表
我抓住了table元素的第0个（第一个）子元素。假设第一个元素将是tbody
我抓住了tbody元素的第0个（第一个）孩子。假设第一行包含您要修改的链接
我抓住了该行的第一个（第二个）孩子。假设链接将在第二列中

如果这些假设不成立，您可能需要更复杂的逻辑来定位链接

步骤2。编辑元素

一旦引用了元素，更改 most 属性就很简单。要编辑rel属性，只需执行以下操作：

myLink.rel = "iLightbox";

就是这样！

第3步。添加类

修改类稍微复杂一些。因为在HTML中以空格分隔的类列表显示的内容实际上是在内存中包含一个不同的单个单词类的数组。换句话说：

<button class="a b c d">

计算机认为是：

Button:
    Class 1: "a"
    Class 2: "b"
    Class 3: "c"
    Class 4: "d"

如果您要删除单个类（例如c），则不必将类设置为"a b d"（这需要您知道其他元素具有的类），您可以说element.classList.remove("c") －这将删除该类，但其他类不受影响。

因此，为了向您的按钮添加一个类，我们将首先获得对其的引用（以链接为起点），然后使用适当的API对其进行修改：

var myButton = myLink.children[0];
myButton.classList.add("fusion-lightbox-link");

同样，请注意以下假设：我认为按钮是链接的第一个子项

替代方法：向后工作

如果您在按钮上有一个自定义类，则可以尝试使用parentNode而不是children而不是先找到链接，然后再单击按钮：

var myButton = document.getElementsByClassName("classNameHere")[0];
myButton.classList.add("fusion-lightbox-link");
var myLink = myButton.parentNode;
myLink.rel = "iLightbox";

Answer 2

以下是三个示例，它们以不同的方式实现您想要的目标：

    // This code would be the code working for your example, only get one element and apply the new attribute and class to id 
    var tableTd = window.getElementsByClassName('column-url')[0],
        aLink = tableTd.getElementsbyTagName('a')[0],
        aButton = aLink.getElementsbyTagName('button')[0];

        aLink.setAttribute('rel', 'iLightbox');
        aButton.classList.add('fusion-lightbox-link');

    // This would work if you have the link and button inside a specific container (td for example)
    var container = window.getElementsByClassName('column-url');

    for( var i = 0; i < tableTd.length, i++)[
        container[i].getElementsbyTagName('a')[0].setAttribute('rel', 'iLightbox');
        container[i].getElementsbyTagName('a')[0].getElementsbyTagName('button')[0].classList.add('fusion-lightbox-link');
    }

    // This would look for all A tags with specific class name and set rel attribute to id, then find the button and add a class to it
    var aLinks = window.getElementsByClassName('aClassName');
    for( var i = 0; i < aLinks.length, i++)[
        aLinks[i].setAttribute('rel', 'iLightbox');
        aLinks[i].getElementsbyTagName('button')[0].classList.add('fusion-lightbox-link');
    }

添加REL属性并追加CLASS属性的Javascript代码

2 个答案:

步骤1。获取参考

步骤2。编辑元素

第3步。添加类

替代方法：向后工作