Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   выбрать дочерний элемент в функции $.each() (https://javascript.ru/forum/jquery/56207-vybrat-dochernijj-ehlement-v-funkcii-%24-each.html)

failure 04.06.2015 14:44

выбрать дочерний элемент в функции $.each()
 
Добрый день.
Помогите исправить ошибку в следующей задаче.

Есть элементы <div> с одним классом (.classname). Необходимо выбрать каждый из этих <div>, поставить на них обработчик события (в примере .hover() ), а в функции обработчика найти дочерний от верхнего <div> элемент с заданным классом, и с ним уже работать.

Пример:
<div class="classname">
   <div class="class1"></div>
   <div class="class2"></div>
   <div class="class3"></div>
</div>

<div class="classname">
   <div class="class1"></div>
   <div class="class2"></div>
   <div class="class3"></div>
</div>


Пробовал так, не работает.
$.each($('.classname'), function() {
   $(this).hover(function() {
      $($(this).children(".class1"), $(this).children(".class2")).toggle();	 
   }, function() {
      $($(this).children(".class1"), $(this).children(".class2")).toggle();
   });
});

Если не использовать функцию $.each(), то работает только для 1-го <div>.
Пробовал $(this).children(".class1") и $(this).children(".class2") заменять переменными, тоже не работает.

Есть ли решение, кроме добавление новых классов нужным элементам?

рони 04.06.2015 15:12

failure,
непонятное описание ... что хотите неизвестно

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .classname  .class1, .classname  .class2 {
    display: none;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       $('.classname').hover(
       function() {
      $(".class1, .class2", this).toggle()
   }
       )
});


  </script>
</head>

<body>
<div class="classname">
   <div class="class1">1</div>
   <div class="class2">2</div>
   <div class="class3">3</div>
</div>

<div class="classname">
   <div class="class1">11</div>
   <div class="class2">22</div>
   <div class="class3">33</div>
</div>

</body>

</html>

failure 04.06.2015 23:19

Цитата:

Сообщение от рони
непонятное описание ... что хотите неизвестно

Как понятней обьяснить не знаю, но с вашего примера уже увидел свою ошибку. Спасибо)


Часовой пояс GMT +3, время: 13:45.