получить рядом родного брата в javascript

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

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

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

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

Можно ли искать HTML таким образом?

4 12
javascript dom 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

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

Этот ответ получил так много понижений за показ примера с jQuery, что я решил добавить больше примеров с vanilla 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 с классом "link", который будет предупреждать текст, содержащийся его родственным элементом span с классом"text". (Конечно, имена классов должны быть более описательными.)

0