JQuery - nie działające wyszukiwanie find()

pytanie zadane 31 marca 2022 w JavaScript przez MisticVoid Początkujący (490 p.)

Witam mam taki kod i nie wiem czemu nie wyszukuje elementu o podanym indeksie. Jest to kod JQuery. Bardzo proszę oraz z góry dziękuję za pomoc.

<style>
        .red{
            background: red;
        }
</style>

<script>
        $(document).ready(function(){
            $("button1").click(function(){
                $("#zadanie15").find($("div").eq(5)).addClass("red");
            })
        })
</script>

<body>
    <div id="zadanie15">
        <div></div><br>
        <div></div><br>
        <div></div><br>
        <div></div><br>
        <div></div><br>
        <div></div><br>
        <button id="button1">Znajdz</button>
    </div>
</body>

komentarz 1 kwietnia 2022 przez VBService Ekspert (253,120 p.)
edycja 1 kwietnia 2022 przez VBService

Do testów

<style>
#zadanie15 {
  counter-reset: div-counter 0;
}
#zadanie15 div {
  margin-bottom: 1em;
  height: 1em;
  counter-increment: div-counter 1;
}
#zadanie15 div::before {
  content: 'div 'counter(div-counter);
}
.red {
  background: red;
}  
</style>
<div id="zadanie15">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <button id="button1">Znajdz</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(document).ready(function() {
  $("#button1").click(function() {
    $("#zadanie15").find($("div").eq(5)).addClass("red");
  })
}) 
</script>

2 odpowiedzi

odpowiedź 31 marca 2022 przez ScriptyChris Mędrzec (190,190 p.)

odpowiedź 31 marca 2022 przez Wiciorny Ekspert (269,710 p.)

.red{
            background: red;
        }

stylizujesz klase 'red' ale nic u Ciebie nie posiada nazwy odwolujacej sie do tej klasy, druga sprawa

$(document).ready(function(){
            $("#button1").click(function(){ 
                $("#zadanie15").find($("div").eq(5)).addClass("red");
            })
        })

element button1 jest pobierany po id "#button1" więc znak # jest wymagany

dalej rezultat: dodaj jakis kontent do diva aby mozna bylo go wysiwetlic np.
[ tzn chodzi mi o to, aby zajmowal jakos przestrzen jako blok]

 
<body>
    <div id="zadanie15">
        <div>Dodaj kontent</div><br>
        <div>Dodaj kontent</div><br>
        <div>Dodaj kontent</div><br>
        <div>Dodaj kontent</div><br>
        <div>Ja bede czerwony</div><br>
        <div>Dodaj kontent</div><br>
        <button id="button1">Znajdz</button>
    </div>
</body>

działający rezultat: https://jsfiddle.net/hxb6faqk/