Выберите конкретный дочерний элемент текущего элемента, используя ЭТО - PullRequest
Новая
       16

Выберите конкретный дочерний элемент текущего элемента, используя ЭТО

3 голосов
/ 09 июня 2011

Я хотел бы знать, как я могу выбрать <span ="data"> из следующих. 

<div class="feeds" onmouseover="...">
    <div id="someDiv"></div>
    <div class="moredivs"></div>
    <span ="data">data in here...</span>
</div>

Я хотел бы использовать что-то вроде: onmouseover="select(this)", а затем иметь возможность доступа к этому диапазону на основе этого события, потому что у меня может быть <div class="feeds"> элементов.

Приветствуется даже предложение JQuery.

Ответы [ 3 ]

2 голосов
/ 09 июня 2011

Предоставленный вами HTML-код недействителен. При определении атрибутов вы должны дать им имя. Предположим, у вас есть это: 

 <span class="data">data in here...</span>

С помощью jQuery вы можете просто сделать это без встроенного обработчика событий. В вашем $(document).ready() вы можете положить: 

$('.feeds').mouseover(function () {
    var $span=$('span.data', this);
});

$span будет содержать доступ к вашему span (в коллекции jQuery).

jsFiddle Demo - версия jQuery

Если вам нужно решение только для Javascript (с встроенным обработчиком событий: onmouseover="select(this)"), вы можете использовать что-то вроде этого: 

function select(me) {
    var span=me.getElementsByClassName('data')[0];
}

getElementsByClassName() доступен только в современных браузерах, но вы можете использовать отступление также для древних IE.

jsFiddle Demo - простой Javascript / встроенный обработчик

Примечание: Если у вас более одного .feeds, рассмотрите возможность использования класса вместо идентификатора для someDiv, поскольку идентификатор может появляться в документе HTML только один раз.

0 голосов
/ 09 июня 2011

Как то так? 

$('.feeds').mouseover(function() {
  $('span',this).html();
});
0 голосов
/ 09 июня 2011

Рабочий пример - http://jsfiddle.net/4NAJ9/1/

<script>
$(function(){
    $('.feeds').hover(function(){
        var data_span = $(this).find('.data');
        alert(data_span.html());
    }, function(){
        // If you wanted something to happen 'onmouseout', put it here
    });
});
</script>

<div class="feeds">
    <div id="someDiv"></div>
    <div class="moredivs"></div>
    <span class="data">data in here...</span>
</div>

Если вы хотите использовать jQuery, то вам не нужно добавлять встроенное событие onclick к каждому элементу .feeds.

Лучше держать свой Javascript отдельно от HTML - jQuery позволяет вам легко это делать.

...