Encontre um Achor em uma div com JavaScript
-
05-07-2019 - |
Pergunta
Em JavaScript, tenho uma referência a uma div. Nesse div é um elemento âncora com um nome = 'FoutItem'
Como faço para obter uma referência à âncora com o nome FoutItem O que está na div eu tenho a referência?
Existem muitos' FoutItem âncoras em outras divs na página. Eu preciso de 'este' divs um.
Solução
Usando o jQuery, está morto e fácil:
<script type="text/javascript">
$(function(){
var item = $("#yourDivId a[name=foundItem]")
)};
</script>
Atualizar:
De acordo com os comentários, se você tiver controle sobre o que identificar/nome/classificar suas tags de âncora, seria melhor aplicar uma classe a eles:
<div id="firstDiv">
<a href="someurl.htm" class="foundItem">test</a>
</div>
<div id="secondDiv">
<a href="someOtherUrl.htm" class="foundItem">test another one</a>
</div>
<!-- and so forth -->
<script type="text/javascript">
$(function(){
var item = $("#firstDiv a.foundItem");
alert(item.html()); // Will result in "test"
var item2 = $("#secondDiv a.foundItem");
alert(item2.html()); // Will show "test another one"
)};
</script>
Se você está fazendo alguma coisa com JavaScript, o jQuery economiza muito tempo e vale a pena investir o esforço para aprender bem. Começar com http://api.jquery.com/browser/ Para obter uma introdução ao que é possível.
Outras dicas
// assuming you're not using jquery or mootools
// assume div is mydiv
var lst = mydiv.getElementsByTagName('a');
var myanchor;
for(var i=0; i<lst.length; ++i) {
if(lst[i].name && lst[i].name == 'foundItem') {
myanchor = lst[i];
break;
}
}
// the mootools method
var myanchor = $(mydiv).getElement('a[name=foundItem]');
Use uma biblioteca JavaScript como jQuery E economize tempo.
var theAnchor = $('#divId a[name=foundItem]');
Você pode usar o método getElementsByTagName para obter os elementos da âncora na div e procurar aquele com o atributo de nome correto:
var found = null;
var e = divReference.getElementsByTagName('A');
for (var i=0; i < e.length; i++) {
if (e[i].name && e[i].name == 'foundItem') {
found = e[i];
break;
}
}
Se found
não é nulo, você tem o elemento.
Se você usar a biblioteca jQuery, poderá deixar fazer a pesquisa:
var found = null;
var e = $(divReference).find('a[name=foundItem]');
if (e.length == 1) found = e.get(0);
Não tenho certeza se isso ajuda, mas queria uma função para lidar com a carga de uma página dinamicamente e role para a âncora de escolha.
function scrollToAnchor(anchor_val) {
alert("" + anchor_val);
var page = document.getElementById('tables');
var found = null;
var cnt = 0;
var e = document.getElementsByTagName('a');
for (var i = 0; i < e.length; i++) {
if (e[i].name && e[i].name == anchor_val) {
found = e[i];
break;
}
cnt++;
}
if (found) {
var nPos = found.offsetTop;
alert("" + nPos);
page.scrollBy(0, nPos);
} else {
alert('Failed with call of scrollToAnchor()' + cnt);
}
}