Найти ахора в Div с помощью JavaScript

Question

В JavaScript у меня есть ссылка на div. В этом div есть якорный элемент с именем = ' foundItem '

Как получить ссылку на якорь с именем foundItem , который находится в Div, к которому я имею ссылку?

На странице есть "много" foundItem якорей в других элементах div. Мне нужен один "этот" DIV.

Answer 1

// 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]');

Answer 2

Вы можете использовать метод getElementsByTagName, чтобы получить элементы привязки в div, а затем найти элемент с правильным атрибутом name:

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;
  }
}

Если found не равно нулю, вы получили элемент.

Если вы используете библиотеку jQuery, вы можете позволить ей выполнить поиск:

var found = null;
var e = $(divReference).find('a[name=foundItem]');
if (e.length == 1) found = e.get(0);

Answer 3

Используйте библиотеку JavaScript, например, jQuery и сэкономьте время.

var theAnchor = $('#divId a[name=foundItem]');

Answer 4

Не уверен, поможет ли это, но хотел, чтобы функция динамически обрабатывала загрузку страницы и прокручивала до нужной привязки.

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);

  }

}

Answer 5

Используя jquery, это очень просто:

<script type="text/javascript">

$(function(){    
    var item = $("#yourDivId a[name=foundItem]")
)};
</script>

Обновление:

Согласно комментариям, если у вас есть контроль над тем, что идентифицировать / назвать / классифицировать ваши якорные теги, было бы лучше применить к ним класс:

<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>

Если вы что-то делаете с javascript, jQuery экономит массу времени и стоит потратить усилия на то, чтобы хорошо учиться. Начните с http://api.jquery.com/browser/, чтобы получить представление о том, что возможно.