Forum PHP.pl > [JavaScript] JQuery dom

Pomoc - Szukaj - Użytkownicy - Kalendarz

rafal_problem

2.01.2012, 13:26:29

Cześć,

Próbuje ogarnąć JQuery. Mam taki przykład:

<div class = "strona">
<ul>
<li><img src= "pos.jpg"><p> Piękny ten świat</p></li>
<li><img src= "pos2.jpg"><p>Fajnie że jestem tutaj</p></li>
</ul>
</div>

i chce np. dać obramowanie dla pos.jpg i drugie dla tekstu tylko że nie znam zbytnio dom JQuery

$(".strona li:img:nth-child(1)").css("border: 1px solid red;");
$(".strona li:p:nth-child(1)").css("border: 1px solid blue;");

Czy wiecie jak to zrobić?

Sephirus

2.01.2012, 13:41:32

[JAVASCRIPT] pobierz, plaintext 
$(".strona li img:nth-child(1)").css("border: 1px solid red;");
$(".strona li p:nth-child(1)").css("border: 1px solid blue;");
[JAVASCRIPT] pobierz, plaintext

rafal_problem

2.01.2012, 14:14:54

Cytat(Sephirus @ 2.01.2012, 13:41:32 )

[JAVASCRIPT] pobierz, plaintext 
$(".strona li img:nth-child(1)").css("border: 1px solid red;");
$(".strona li p:nth-child(1)").css("border: 1px solid blue;");
[JAVASCRIPT] pobierz, plaintext

Nie działa

$(".strona li p:nth-child(1)").css( "color", "blue" );

-kaem-

2.01.2012, 14:40:43

A czy nth-child(1) jest tutaj wogóle potrzebne?

Gość

2.01.2012, 14:46:49

acha, i jako parametr selektora hth-child podajesz indeks dziecka, także
$(".strona li p:nth-child(1)") szuka dziecka o indeksie 1, który jest paragrafem, ale tego nie znajduje, bo dzieckiem o tym indeksie jest img.

Ghost_78

2.01.2012, 14:49:48

hmmm
tak jak napisał -kaem-
może tak:

[PHP] pobierz, plaintext 
$(".strona li > img").css("border: 1px solid red;");
$(".strona li > p").css("border: 1px solid blue;");
[PHP] pobierz, plaintext

rafal_problem

2.01.2012, 15:03:42

Cytat(Ghost_78 @ 2.01.2012, 14:49:48 )

hmmm
tak jak napisał -kaem-
może tak:

[PHP] pobierz, plaintext 
$(".strona li > img").css("border: 1px solid red;");
$(".strona li > p").css("border: 1px solid blue;");
[PHP] pobierz, plaintext

Nic to nie dało

Ghost_78

2.01.2012, 15:13:26

Oczywiscie - jak zwykle banał

[PHP] pobierz, plaintext 
$(".strona li img").css("border","1px solid red");
$(".strona li p").css("border","1px solid blue");
[PHP] pobierz, plaintext

EDIT:
metoda css ma 2 argumenty.

by_ikar

2.01.2012, 15:19:29

Nie musisz znać DOM'a jquery, też go nie znam, ale umiem czytać i szukać tego co mnie interesuje w dokumentacji. 30 sekund szukania: http://api.jquery.com/eq-selector/#example-1 a o to co masz w przykładzie, praktycznie dokładnie to czego ci potrzeba:

[JAVASCRIPT] pobierz, plaintext 
// applies yellow background color to a single <li>
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );
[JAVASCRIPT] pobierz, plaintext

A tobie potrzebne jest coś takiego:

[JAVASCRIPT] pobierz, plaintext 
$("ul.strona li:eq(1) img").css("border","1px solid red");
$("ul.strona li:eq(2) img")css("border","1px solid blue");
[JAVASCRIPT] pobierz, plaintext

rafal_problem

2.01.2012, 16:09:55

Cytat(by_ikar @ 2.01.2012, 15:19:29 )

[JAVASCRIPT] pobierz, plaintext 
// applies yellow background color to a single <li>
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );
[JAVASCRIPT] pobierz, plaintext

A tobie potrzebne jest coś takiego:

[JAVASCRIPT] pobierz, plaintext 
$("ul.strona li:eq(1) img").css("border","1px solid red");
$("ul.strona li:eq(2) img")css("border","1px solid blue");
[JAVASCRIPT] pobierz, plaintext

Nie działa. Postanowiłem dodać swój plik - sry że tak wygląda ale testuje w nim wszystko :

Dodałem tutaj przykład Twój i Ghost78

$(".strona li img").css("border","1px solid black");
$("ul.strona li:eq(2) img")css("border","1px solid blue");

Kod

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { font-size:18px; margin:0; }
  span { color:blue; text-decoration:underline; cursor:pointer; }
  .example { font-style:italic; }

  div.strona
  {
text-align: left;
    width: 900px;
    height: 1400px;
    margin-left: auto;
    margin-right: auto;
    float: left;
        overflow: hidden;
        background: black;
  }
    div.strona li
  {
text-align: left;
    width: 900px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    float: left;
        overflow: hidden;
        background: red;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  To do list: <span>(click here to change)</span>
  <ul>
    <li>Eat</li>
    <li>Sleep</li>

    <li>Be merry</li>
  </ul>
  <div class ="gallery"><img src = "http://www.4promo.pl/pilka-nozna-training-3-warstwy__vb__0605015.jpg"></div>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, ite<p>m 2</p></li>
  <li>List 2, item 3</li>
</ul>

  <div class = "strona">
<ul>
<li><img src= "http://www.4promo.pl/pilka-nozna-training-3-warstwy__vb__0605015.jpg"><p> Piękny ten świat</p></li>
<li><img src= "http://www.4promo.pl/pilka-nozna-training-3-warstwy__vb__0605015.jpg"><p>Fajnie że jestem tutaj</p></li>
</ul>
</div>


<script>
  $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
$(".gallery img:eq(1)").css("backgroundColor", "#ff0" );
$(".strona li img").css("border","1px solid black");
$("ul.strona li:eq(2) img")css("border","1px solid blue");
$("ul.nav li p:nth-child(2)").css( "color", "red" );

    $("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });

</script>

</body>
</html>

Ghost_78

2.01.2012, 16:14:26

To co Ci napisałem sprawdziłem u siebie i działa.
Ty napisałeś

[PHP] pobierz, plaintext 
$(".strona li img").css("border","1px solid black");
[PHP] pobierz, plaintext

więc z tego co widzę teraz chcesz zamienić czarny(domyślny) na czarny

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.