Как получить внутренний тег с помощью getElementById после указанного элемента?

0

Как получить внутренний тег тега <a> -tag, следующий после красного диапазона?

Вот пример исходного кода:

<p>
    Text1<br>
    <span style="color:blue">span</span><br>
    <a href="http://google.com">Google</a>
</p>
<p>
    Text1<br>
    <span style="color:red">span</span><br>
    <a href="http://bing.com">Bing</a>
</p>
<p>
    Text1<br>
    <span style="color:blue">span</span><br>
    <a href="http://facebook.com">Facebook</a>
</p>
    <p>
    Text1<br>
    <span style="color:red">span</span><br>
    <a href="http://myspace.com">myspace</a>
</p>

Здесь вывод:

Изображение 174551

Я попытался использовать document.get.Element.ByTagName, но я действительно не знаю, как использовать его для элементов, которые следуют только после красного "span".

Может быть, я должен использовать jQuery?

Теги:

1 ответ

1
Лучший ответ

Если бы вы использовали классы, вместо встроенного CSS, вы могли бы просто CSS:

.redStyle = {
    color: red;
}

.blueStyle {
    color: blue;
}

// style the elements:

.redStyle + br + a, /* multiple adjacent-sibling combinators are required
                       if you insist on retaining the 'br' elements */
.redStyle ~ a {
    color: green;
}

Разумеется, для этого потребуется HTML, например:

<p>
    Text1<br>
    <span class="blueStyle">span</span><br>
    <a href="http://google.com">Google</a>
</p>
<p>
    Text1<br>
    <span class="redStyle">span</span><br>
    <a href="http://bing.com">Bing</a>
</p>

Чтобы получить фактические узлы или свойство этих узлов с помощью JavaScript:

function follows(target, cName) {
    while (target.previousSibling) {
        if (target.previousSibling.className && target.previousSibling.className.indexOf(cName) > -1) {
            return true;
        } else {
            target = target.previousSibling;
        }
    }
    return false;
}

var links = document.getElementsByTagName('a'),
    relevantLinks = [],
    relevantText = [];

for (var i = 0, len = links.length; i < len; i++) {
    if (follows(links[i], 'redStyle')) {
        // this adds to the store of relevant links in which you're interested
        relevantLinks.push(links[i]);
        // you could act on them directly, but storing them
        // allows for further use at a later time (if required)
    }
}
for (var i = 0, len = relevantLinks.length; i < len; i++) {
    // iterating over the relevant links/elements, pushing their text
    // into another array to store that text
    relevantText.push(relevantLinks[i]['textContent' || 'innerText']);
}    

console.log(relevantText);

Демо-версия JS Fiddle.

Конечно, в большинстве современных браузеров, если вы используете имена классов (опять же, вместо встроенного CSS), вы можете просто использовать document.querySelectorAll() для извлечения списка узлов соответствующих элементов и перебрать это непосредственно:

var links = document.getElementsByTagName('a'),
    relevantLinks = document.querySelectorAll('.redStyle ~ a'),
    relevantText = [];

for (var i = 0, len = relevantLinks.length; i < len; i++) {
    relevantText.push(relevantLinks[i]['textContent' || 'innerText']);
}

console.log(relevantText);

Демо-версия JS Fiddle.

  • 0
    Предупредите его о разделительном теге <br/>
  • 0
    @ Итай: хорошая мысль (я бы их не заметил), спасибо! Отредактированный в.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню