получить ближайший брат в javascript

у меня есть определенная структура DIV с тегом якоря где-то между ними. При нажатии на ссылку мне нужно получить значение другого span элемент внутри родительского div и сделайте что-нибудь, (скажем, предупредите его).

html выглядит так:

...
<div id="div1">
  ...
  <span>This is reqd</span>
  ...
  <a href="#">Click Me </a>
  ...
</div>
...

весь div повторяется много раз на странице. Когда я нажимаю на a Я хочу предупредить "это reqd".

можно ли искать HTML так?

12
dom javascript siblings

4 ответов

для одного элемента span это должно быть довольно легко. Просто вызовите myFunction (this) по щелчку ссылки и манипулируйте DOM следующим образом :

function myFunction(currObj){
var parentofSelected = currObj.parentNode; // gives the parent DIV

var children = parentofSelected.childNodes;
for (var i=0; i < children.length; i++) {
    if (children[i].tagName = "span") {
        myValue= children[i].value;
        break;
    }
}
alert(myValue); // just to test

 } // end function

надеюсь, что это работает. Для меня-да !!

3

С <span> не является непосредственным брат этой <a>, мы не можем вызвать .previousSibling или .previousElementSibling. Лучшим решением может быть получение родитель и запрос <span>

document.getElementById( 'div1' ).getElementsByTagName( 'a' )[ 0 ].addEventListener('click', function() {
    alert( this.parentNode.getElementsByTagName( 'span' )[ 0 ].textContent );
}, false);

демо: http://jsfiddle.net/cEBnD/

2

использование jQuery:

$('#innerId').siblings()
0

обновление: решения с jQuery и без него

этот ответ получил так много downvotes для показа примера с jQuery, что я решил добавить больше примеров с ванильным JavaScript, чтобы любой мог выбрать, использовать jQuery или нет.

как правило, вы можете использовать .previousSibling в ванильном JavaScript см.:

и вы можете использовать .prev() в jQuery, см.:

но имейте в виду, что они могут не работать в более сложных случаях, когда вы не знаете точную структуру всего вашего DOM.

вот несколько примеров достижения этой цели как с помощью jQuery, так и с помощью vanilla JavaScript, для простых случаев с фиксированной структурой DOM и для более сложных случаев с использованием классов.

без классы

для самых простых структур DOM вы можете уйти, поставив прослушиватели событий на все ссылки и полагаясь на неявное знание DOM, но это может не сработать для более сложных ситуаций - для тех, кто см. примеры с классами ниже.

С помощью jQuery:

$('a').click(function () {
  alert( $(this).prev().text() );
  return false;
});

посмотреть демо.

без jQuery:

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.previousSibling.previousSibling.innerText);
  });
});

отметим, что previousSibling должен использоваться дважды, потому что пустой текстовый узел, который находится между Tha span и link, будет использоваться в противном случае.

посмотреть демо.

используя классы

если span не сразу, предшествующего a элемент тогда вы также можете сделать это немного по-другому, также добавив некоторые классы, чтобы убедиться, что ваш код не нарушает никаких других ссылок на странице:

С помощью jQuery:

$('a.link').click(function () {
  alert( $(this).parent().find('span.text').text() );
  return false;
});

посмотреть демо.

без jQuery:

document.querySelectorAll('a.link').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.parentNode.querySelector('span.text').innerText);
  });
});

посмотреть демо.

приведенный выше код будет привязывать обработчики кликов к каждому a элемент с классом "ссылка", который будет предупреждать текст, содержащийся его брат span элемент с классом "текст". (Конечно, имена классов должны быть более описательными.)

0