Istnieje strona HTML ze strukturą:

<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

Dołączyłem wydarzenie na Hover na najwyższym Div z:

$(".row.sem").hover(function(){
//my code....
});

Teraz, kiedy najechałem na jednym z tych div, chcę uzyskać dostęp do wewnętrznej zawartości tylko tych elementów H3, które znajdują się w moim unośnym elemencie DIV.

W tym celu próbowałem:

var a = $(this).children(["h3"]);
 for(ei in ee){                
   console.log(ei);     
  }

Ale to wydrukowano znacznie więcej takich rzeczy jak Fadein, Fadeout, Przewiń ...

Proszę zaproponować, co jest złe w tym wdrożeniu.

Dzięki.

0
ssharma 25 czerwiec 2017, 17:57

4 odpowiedzi

Najlepsza odpowiedź

.children() zbiera bezpośrednie elementy dzieci podczas szukania h3. Można więc użyć metody .find() lub nawet (bardziej szczegółowe) .children('.subject').children('h3').

$(".row.sem").hover(function(){
  // mouse enter
  var a = $(this).find("h3");
  a.each(function(){
    console.log($(this).text());
  });
}, function(){
    // mouse leave
    console.clear();
    // ...
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>

Patrz: https://api.jquery.com/children/

4
kosmos 25 czerwiec 2017, 15:07

Jeśli sprawdzasz dokumentację MDN dla pętli Mówi, że jest to flaga na "łącznych właściwościach". Sprawdź ten post także Enumarable Właściwości

Spójrz na to.

$(".row.sem").hover(function(){

  // i am list of all headers nested inside element with class "row" and "sem"
  //  elements(array)
  var headers = $(this).find('h3');
   
   // console first element's html from the array.
   console.log($(headers[0]).html())
  

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>
1
Jan Ciołek 25 czerwiec 2017, 15:27

Jasne i proste.

$(".row.sem").hover(function() {
  $(this).find("h3").each(function() {
    console.log($(this).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>
2
Oen44 25 czerwiec 2017, 15:11

Spowoduje to otrzymanie treści elementów dziecka h3 .row.sem. Musisz zdobyć wszystkie dzieci Div, na którym się unosisz. Możesz uzyskać dostęp i modyfikować zawartość HTML w tych dzieciach z .html() i sugeruję, aby spojrzeć na tę metodę.

$(".row.sem").hover(
  function() {
    console.log($(this).children().text());
  }, function (){}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sem">
 <div class="subject"><h3>A</h3></div>
 <div class="subject"><h3>B</h3></div>
</div>
<div class="row sem">
 <div class="subject"><h3>C</h3></div>
 <div class="subject"><h3>D</h3></div>
</div>
2
KyleS 25 czerwiec 2017, 15:07