HTML DOM traversal using JavaScript /jQuery

Question

I've read all relevant posts but there must be something I am missing. I have a HTML doc that 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 to select each element of class 'listItem' so that i can dynamically alter the src of contentImg and the text of innerText and outerText.

I only seem to be able to select all or none. For instance the code:

$('.hoverClass').hover(function(){
    var li =  $(".listContainer").children().length;
    var title = $(this);
    title.text(li);
});

Will show the number of list items and

var li =  $(".listContainer").hide();

will hide all of the items but

var li =  $(".listContainer").children()[0].hide();

Does not hide the first list item div (class='image') - which I believe would be the first child element.

I have also tried using

var node = document.getElementByClassName();

using both 'contentList' and 'image' and have not been able to iterate through an array of results or index for an individual element.

Can somebody tell me what I'm doing wrong or misunderstanding.... Thanks

`var li = $(".contentList").children()[0].hide();` You don't use the class contentList in your html — Joern Boegeholz, Jan 27 '16 at 13:51
`.children()[0]` is not a jQuery object. => `children().first().hide()` I believe should work or `children().eq(0).hide()` — Tim Vermaelen, Jan 27 '16 at 13:53
http://stackoverflow.com/questions/9151729/how-to-get-children-array-of-an-element-in-jquery — OliverJ90, Jan 27 '16 at 13:54
should say 'listContainer' sorry that addition was typed instead of copy/pasted — vitamike, Jan 27 '16 at 13:57

score 1 · Answer 1 · answered Jan 27 '16 at 13:57

1

I don't see an element with the class "contentList" in your HTML. Also, children()[0] will access a DOM element, not a jQuery element. If you change it to something like $(".listContainer").children(':eq(0)').hide() it will work.

answered Jan 27 '16 at 13:57

unpollo

806
5
15

score 1 · Accepted Answer · answered Jan 27 '16 at 15:02

you are not using the class "contentList". and getting the children elements are like

$(".listContainer").children();
:eq() selector will give you the index based matched element. https://api.jquery.com/eq-selector/
Then easily you can hide with hide(); method

$(".listContainer").children(':eq(index)').hide();

Rounin · Answer 3 · 2016-01-27T14:03:29.737

I want to select each element of class 'listItem' so that i can dynamically alter the src of contentImg and the text of innerText and outerText.

You can use a straightforward loop:

var listItems = document.getElementsByClassName('listItem');

for (var i = 0; i < listItems.length; i++) {

    var image = listItems[i].getElementsByClassName('image')[0];
    var contentImg = image.getElementsByClassName('contentImg')[0];
    var innerText = image.getElementsByClassName('innerText')[0];
    var outerText = listItems[i].getElementsByClassName('outerText')[0];

    [... REST OF CODE HERE...]

}

score 0 · Answer 4 · answered Jan 27 '16 at 13:59

I'm not sure if this is what you are looking for. But in order to get rid of the first item you select. You select the class you want and it returns an array of jquery objects that you can manipulate.

$('.hoverClass').click(function(){
    var li =  $(".listContainer").children().length;
    var title = $(this);
    $('.listItem')[0].remove();
    title.text(li);
});
var i = 0;
$('.listItem').each(function(){
$(this).find('.innerText').text('Dynamic text ' + i++);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
        <h1 class="hoverClass">Click ME</h1>
    </div>
    <ul class="listContainer">
        <li class="listItem" >
             <div class="image">
                 <img class="contentImg" src="#"/>
                 <h5 class="innerText">text1</h5>
              </div>
            <p class="outerText">Text1</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">Text3</p>
        </li>
        <li class="listItem" >
             <div class="image">
                 <img class="contentImg" src="#"/>
                 <h5 class="innerText">text1</h5>
              </div>
            <p class="outerText">Text4</p>
        </li>

    </ul>

HTML DOM traversal using JavaScript /jQuery

4 Answers4