HTML DOM traversal using JavaScript /jQuery -
i've read relevant posts there must missing. have html doc resembles below:
<!doctype html> <html> <head lang="en"> </head> <body> <div> <h1 class="hoverclass">hover item</h1> </div> <ul class="listcontainer"> <li class="listitem" > <div class="image"> <img class="contentimg" src="#"/> <h5 class="innertext">text1</h5> </div> <p class="outertext">text2</p> </li> <li class="listitem" > <div class="image"> <img class="contentimg" src="#"/> <h5 class="innertext">text1</h5> </div> <p class="outertext">text2</p> </li> <li class="listitem" > <div class="image"> <img class="contentimg" src="#"/> <h5 class="innertext">text1</h5> </div> <p class="outertext">text2</p> </li> <li class="listitem" > <div class="image"> <img class="contentimg" src="#"/> <h5 class="innertext">text1</h5> </div> <p class="outertext">text2</p> </li> </ul> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="indexjs.js"></script> </body> </html> i want select each element of class 'listitem' can dynamically alter src of contentimg , text of innertext , outertext.
i seem able select or none. instance code:
$('.hoverclass').hover(function(){ var li = $(".listcontainer").children().length; var title = $(this); title.text(li); }); will show number of list items ,
var li = $(".listcontainer").hide(); will hide of items but
var li = $(".listcontainer").children()[0].hide(); does not hide first list item div (class='image') - believe first child element.
i have tried using
var node = document.getelementbyclassname(); using both 'contentlist' , 'image' , have not been able iterate through array of results or index individual element.
can tell me i'm doing wrong or misunderstanding.... thanks
you not using class "contentlist". , getting children elements like
- $(".listcontainer").children();
- :eq() selector give index based matched element. https://api.jquery.com/eq-selector/
- then can hide hide(); method
$(".listcontainer").children(':eq(index)').hide();
Comments
Post a Comment