Javascript код для добавления атрибута REL и добавления атрибута CLASS

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

Это три примера, которые работают по-разному для достижения того, что вы хотите:

    // 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');
    }

Answer 2

Шаг 1. Получите ссылку

Чтобы отредактировать элемент, сначала нужно указать , какой элемент вы хотите отредактировать.На языке программистов это известно как получение ссылки на элемент.Есть несколько способов сделать это в JavaScript.Одним из наиболее распространенных является использование document.getElementById() и присвоение элементу уникального идентификатора.Например, если вы изменили ваш 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];

Обратите внимание, что это делает несколько предположений относительно структуры вашей страницы:

• Я взял 0-й (первый) элемент с тегом table.Предполагается, что на этой странице нет других таблиц до этой
• Я захватил 0-й (первый) дочерний элемент элемента таблицы.Предполагается, что первый элемент будет tbody
• Я взял 0-й (первый) дочерний элемент элемента tbody.Предполагается, что первая строка содержит ссылку, которую вы хотите изменить
• Я захватил 1-го (второго) дочернего элемента строки.Это предполагает, что ссылка будет находиться во втором столбце

Если эти предположения не выполняются, вам может потребоваться более сложная логика для определения местоположения вашей ссылки

Шаг 2. Редактирование элемента

Если у вас есть ссылка на ваш элемент, обманчиво просто изменить большинство атрибутов.Чтобы отредактировать атрибут 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";