У меня есть определенная структура DIV с тегом привязки где-то между ними. При нажатии на ссылку мне нужно получить значение другого элемента span в родительском элементе div и что-то сделать (скажем, предупредить его).
HTML такой:
...
<div id="div1">
...
<span>This is reqd</span>
...
<a href="#">Click Me </a>
...
</div>
...
Весь div повторяется много раз на странице. Когда я нажимаю на a, я хочу предупредить «Это требуется».
Можно ли искать HTML таким образом?
Для одного элемента 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
Надеюсь, это сработает. Это сделал для меня !!
document.getElementsByTagName('span')[0] вместо этого цикла for. кроме того, .value не является допустимым способом доступа к диапазону.
- person Cerbrus; 23.01.2013
Поскольку <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/
addEventListener и textContent, вы также можете выбрать querySelector: P jsfiddle.net/Ralt/cEBnD /1
- person Florian Margaine; 23.01.2013
Этот ответ получил так много отрицательных голосов за демонстрацию примера с jQuery, что я решил добавить больше примеров с ванильным JavaScript, чтобы каждый мог выбрать, использовать ли jQuery или нет.
Как правило, вы можете использовать .previousSibling в ванильном JavaScript, см.:
и вы можете использовать .prev() в jQuery, см.:
Но имейте в виду, что они могут не работать в более сложных случаях, когда вы не знаете точную структуру всего вашего DOM.
Вот несколько примеров достижения этой цели как с помощью jQuery, так и с помощью ванильного JavaScript, для простых случаев с фиксированной структурой DOM и для более сложных случаев с использованием классов.
Для самых простых структур DOM вам может сойти с рук размещение прослушивателей событий во всех ссылках и использование неявного знания DOM, но это может не сработать для более сложных ситуаций — см. примеры с классами ниже.
$('a').click(function () {
alert( $(this).prev().text() );
return false;
});
См. DEMO.
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
alert(link.previousSibling.previousSibling.innerText);
});
});
Обратите внимание, что previousSibling нужно использовать дважды, потому что в противном случае будет использоваться пустой текстовый узел, который находится между диапазоном и ссылкой.
См. ДЕМО.
Если span не находится непосредственно перед вашим элементом a, вы также можете сделать это немного по-другому, а также добавить несколько классов, чтобы убедиться, что ваш код не нарушает другие ссылки на странице:
$('a.link').click(function () {
alert( $(this).parent().find('span.text').text() );
return false;
});
См. DEMO.
document.querySelectorAll('a.link').forEach(link => {
link.addEventListener('click', () => {
alert(link.parentNode.querySelector('span.text').innerText);
});
});
См. ДЕМО.
Приведенный выше код привязывает обработчики кликов к каждому элементу a с классом «ссылка», который будет предупреждать текст, содержащийся в его родственном элементе span с классом «текст». (Конечно, имена классов должны быть более описательными.)
<html>
<body>
<div id="div1">
<span>This is required</span>
<a href="#" onclick="myclick(this.parentNode)">Click Me</a>
</div>
</body>
<script>
function myclick(x){
var y = x.querySelector("span").innerHTML;
alert(y)
}
</script>
</html>
вместо span вы также можете указать имя класса, например,
<span class="classname">This is required</span>
x.querySelector(".classname").innerHTML
Использование jQuery:
$('#innerId').siblings()
