CODEWITHSUNDEEP
javascriptjqueryhtmldom
vitamike
vitamike

Reputation: 123

HTML DOM traversal using JavaScript /jQuery

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

Upvotes: 0

Views: 107

Answers (4)

Reddy Uppathi
Reddy Uppathi

Reputation: 36

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

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

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

Upvotes: 1

Rounin
Rounin

Reputation: 29511

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...]

}

Upvotes: 0

Roger
Roger

Reputation: 3256

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>

Upvotes: 0

unpollo
unpollo

Reputation: 804

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.

Upvotes: 1

Related Questions