JQuery Bulma Fonksiyonları – Finding

.add() : Seçili olan nesneye yeni bir özellik ekler.

<div class=’yazi’>Yakup KALEBAŞI</div>

Yukarıdaki yazdi div’ e color rengini eklemek istersek

$('div').css('color','red');
$('.yazi').css('color','red');

Her iki satırda div ‘in rengini kırmızı yapacaktır.

.children() : Seçilen nesnenin içerisindeki alt nesnelere erişmeye yarar.

<ul>
    <li>
        Araçlar
        <ul id="seviye1_1">
            <li>Otobüs</li>
            <li>Taksi</li>
            <li>Kamyon</li>
        </ul>
    </li>
    <li>
        Meslekler
        <ul id="seviye1_2">
            <li>Avukat</li>
            <li>Doktor</li>
            <li>Öğretmen</li>
        </ul>
    </li>
</ul>

$('ul#seviye1_2').children().css('background-color', 'yellow');

.closest() : Girilen ifade ile seçici arasındaki en yakın blok nesneleri seçer.

<div id="level2">
    <span>Level 2</span>
    <div id="level1">
        <span>Level 1</span>
        <div id="level0">
            <div id="main">
                <span>Main</span>
            </div>
        </div>
    </div>
</div>

$('#main').closest('#level1').css('color', 'red');

.contents(): Belirtilen seçiciye göre verilen ifadenin aranan noktasına manüplasyon yapar.

<div><em>Merhaba Kullanıcı.....</em></div>

<button>"em" tag 'nın içeriğini bul ve "b" tagı arasına al</button><br>

$("button").click(function () {
                $("div").contents().filter("em").wrap("<b/>");
            });

.find() : Belirtilen seçicinin içerisindeki nesneyi seçmeye yarar.

<ul>
    Arabalar
    <li>
        BMW
        <span>M5</span>
        <strong>Spor</strong>
        <span>Harika</span>
    </li>
</ul>

$("ul").find("span").css({ "color": "red", "border": "2px solid red" });

.next() :  Bir nesneden sonraki nesyeyi seçer.

<ul>
    Aile
    <li>Anne</li>
    <li>Baba</li>
    <li class="cocuklari">cocuklarin dan sonra torun gelir.</li>
    <li>İlk torunum</li>
    <li>İkinci torunumuz</li>
</ul>

$("li.cocuklari").next().css({ "color": "red", "border": "2px solid red" });

.parent() : Belirtilen nesnenin üstündeki nesneye geçilir.

<div>
    <p>iç paragraf</p>
</div>  
<div id="div1">
    dış paragraf
</div>

$("p").parent().css('background', 'red');