CSS veya js kullanarak dinamik seçiciyle herhangi bir li'nin bir sonraki öğesini seçin

Bunu almanın yolunu bulamıyorum.


Ve JS kullanarak onclick'e dinamik sınıf uygulayın. daha sonra ekstra CSS uygulamak için bir sonraki li'yi seçin.

    *******

Şimdi css'yi ******* li üzerine uygulamak istiyorum.

Umarım sorum açıktır. Şimdiden teşekkürler.

0
$ ('li.test'). sonraki ('li') api.jquery .com/sonraki
katma yazar Satpal, kaynak

6 cevap

Javascript'te CSS seçicileri kullanabilirsiniz, böylece şöyle bir şey yapabilirsiniz:

var yourListItem = document.querySelector("li.test + li");

işte size bir keman

2
katma
@ webtuts4u dinamik olarak atanmış dy ile ne demek istiyorsun?
katma yazar Nishit Maheta, kaynak
test sınıfı dinamik olarak eklenirse, siz sınıfı ekledikten sonra kod satırımı çalıştırın
katma yazar grabthefish, kaynak
Eşleşmedi, .test dinamik olarak atandığında ne oldu. Çalışmıyor
katma yazar CodeBriefly, kaynak
$("li").on("click", function(){
  $(this).addClass("yourclass");
  $(this).next("li").css("backgroung-color","red"); //add css
});
1
katma
Ve JS kullanarak li onclick'e dinamik sınıf uygulayın bu sizin ifadenizdir. @ webtuts4u
katma yazar Brijesh Bhatt, kaynak
Sorumla eşleşmiyor. Onun değil li, dinamik sınıf ile li. Zaten test edildi. Çalışmıyor
katma yazar CodeBriefly, kaynak

Ben jQuery gerek yok aynı şeyi yapacak CSS etiketini kullanmaya gerek olmadığını düşünüyorum

.test sınıfından hemen sonra yerleştirilen

  • öğelerini seçer

    ex:http://jsfiddle.net/Muthukumaru/q64tLhf5/

     li.test + li{
       **Your CSS styles **
     }
    
  • 1
    katma

    .next can only return the immediate next sibling

    $('li.test').on('click', function() {
        $('li.test').next('li').css("color", "red");
    });
    

    ve *******'nin rengini değiştirmek için, bunları aşağıdaki şekilde li etiketine koymanız gerekir:

  • *******
  • 
    

    Ayrıca @empiric dediği gibi $ ('li.test') yerine $ (this) kullanabilirsiniz.

    1
    katma
    $ kullanabilirsiniz (bu)
    katma yazar Nishit Maheta, kaynak
    tıklama işleviniz içinde $ ('li.test') yerine $ (this) kullanabilirsiniz.
    katma yazar empiric, kaynak

    böyle denemelisin

    <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

        $(document).ready(function(){
           $('li.test').next('li').css('color','green')
        })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    </div> </div>

    0
    katma

    use below cod . read more about next()

    check DEMO

     $(document).ready(function(){
      $('li.test').next('li').css('color','red');
     });
    

    Click etkinliği için

     $(document).ready(function(){
       $('li.test').on('click',function(){
        $(this).next('li').css('color','red');
       });
     });
    
    0
    katma