Сложные селекторы
Такая вот конструкция:
<div class="parent">
<div class="child-lev-1">
<a href="#"><div class="child-lev-2"></div></a>
</div>
<div class="child-lev-1-1">
<a href="#">Link</a>
</div>
</div>
Такой код:
$(".parent div").hover(function() {
$(как здесь определить "child-lev-2"?).addClass("hvr");
Т.е. - как выбрать именно этот (.child-lev-2), очень нужный элемент? P.S. - таких конструкций на странице очень много, с id не получается... |
xPath вам в руки http://www.rsdn.ru/article/inet/jQuery.xml#E4ZAE
хотя возможно я поторопился, должно проще делаться, просто я jQuery мало общаюсь. Но всё равно ссылку посмотрите там много полезных примеров. |
Вот так должно работать:
$('div[class="child-lev-2"]').addClass("hvr")
с id - тоже самое:
$('div[id="child-lev-2"]').addClass("hvr")
|
[quote=colonel;37277]Вот так должно работать:
$('div[class="child-lev-2"]').addClass("hvr")
Не работает. вернее работает, но неправильно - выбирает ВСЕ элементы class="child-lev-2" на странице. а нужен только один, который находится в том-же "parent"-элементе... поэтому же я и написал сначала
$(".parent div").hover(function() {
- чтобы функция реагировала только на элементы, вложенные в парент. |
Цитата:
$(".parent div").hover(function() {
$(this).addClass("hvr"); }
работает, но недостаточно правильно. не отрабатывает добавление класса к "child-lev-2", если срабатывает на "child-lev-1-1". |
Пробуй так:
$(".parent div").hover(
function()
{
$(".child-lev-2", this).addClass("hvr")
}
);
P.S. У меня работает - может и то что ты хочешь. |
$(".parent div").hover(
function() {
$(this).find(".child-lev-2").addClass("hvr");
},
function(){
$(this).find(".child-lev-2").removeClass("hvr");
}
);
|
Micscr, Urfin - огромное спасибо, все Ваши предложенные варианты - работают. Именно то, что надо.
|
Помогите побраться к елементу через jQuery
Привет всем!
Есть система переписки на php + mySql + jQuery Проблема вот в чем: Нужно реализовать клик мышки на комментарии. Комментарии находятся в такой иерархии:
<div class="form_field_center" id="message_list">
<div id="newComment"></div>
<div id="comment_list">
//Сообщение читаются из базы и вставляются сюда
</div>
</div>
Сообщения читаются из базы в файле .рhp и возвращаются благодаря функции на AJAX foreach($comments as $c) echo '<div>'.$c->markup_read().'</div>';
$('#comment_list').append(html);
В свою очередь, существует класс сообщений с методом markup_read, что возвращает HTML разметку сообщение с соответствующими классами.
public function markup_read(){
$this->data['date_time'] = strtotime($this->data['date_time']);
return '<div class="comment" id='.$this->data['id'].'>
<div class="avatar"></div>
<div class="delete" id='.$this->data['id'].'></div>
<div class="edit" id='.$this->data['id'].'></div>
<div class="author">'.$this->data['author'].' ᐅ '.$this->data['recipient'].'</div>
<div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
<p>'.$this->data['message'].'</p>
<div>'.$this->data['id'].'</div>
</div>';
}
Нужно реализовать обработку клиак по разметке сообщение - тоесть по классу comment, delete, edit ... Как добраться до класса comment? Помогите, пожалуйста. Спасибо. |
Цитата:
$('.comment')
|
Цитата:
Если правильно понял, то можно так:
$('#comment_list')
.on('click', '.comment', fucntion(){})
.on('click', '.delete', fucntion(){})
.on('click', '.edit', fucntion(){});
|
Сначала так и было, пока новидомлення генерировались на странице. Но теперь они генерируются в файле script.js и отправляются после $('#comment_list').append (html)
Если открыть источник страницы, сообщений div нет. Код:
<div class="form_field_center" id="message_list"> |
Цитата:
Можно попробовать тогда так:
$('#comment_list')
.append(html)
.find('.comment').on('click', fucntion(){}).end()
.find('.delete').on('click', fucntion(){}).end()
.find('.edit').on('click', fucntion(){});
либо так:
var commentList = function(){return $('#comment_list');};
commentList
.append(html)
.find('.comment').on('click', fucntion(){}).end()
.find('.delete').on('click', fucntion(){}).end()
.find('.edit').on('click', fucntion(){});
Соотв. код этот ставить после загрузки Вашего "script.js". На самом деле способов множество может быть ... |
Опять не работает. Перепробовал все ваши варианты а также вводил свои правки - ни один не заработал.
Возможно нужно грузить сообщения не в файле script.js? |
Цитата:
Как-то так:
console.group('Test #comment_list');
console.log($('#comment_list'));
console.log(html);
$('#comment_list').append(html);
console.log($('#comment_list'));
console.log($('#comment_list').find('.comment'));
console.log($('#comment_list').find('.delete'));
console.log($('#comment_list').find('.edit'));
console.groupEnd();
Ну и соотв. заменяя $('#comment_list') на те варианты, которые приводил выше. |
Если использовать строку при нажатии на comment_list
var htmlStr = $('#comment_list').html();
получим всю историю переписки строкой. Но как получить ID сообщения на который наведен курсор и щелчке на нем? |
Цитата:
var htmlStr = $('#comment_list').html();
var commentList = $(htmlStr);
commentList
.find('.comment').on('click', fucntion(){var t = $(this); var id = t.prop('id');}).end()
.find('.delete').on('click', fucntion(){var t = $(this); var id = t.prop('id');}).end()
.find('.edit').on('click', fucntion(){var t = $(this); var id = t.prop('id');});
|
var commentList = $(htmlStr); при клике на comment_list возвращает массив типа [object Object] |
Вот как выглядят два сообщения при проверке элементов:
 Вот html строка етих сообщений:  Однако при просмотре источника страницы наблюдаю следующее:  |
Консоль выдала:
</div> has no method 'find' |
| Часовой пояс GMT +3, время: 14:13. |