Search code examples
javascriptjqueryhtmljquery-waypoints

Updating the content of a div using jquery waypoints

I am using waypoints.js

In the HTML given below, when the waypoint of a hardware class is reached it should update the content of the <div> having class number with the content of the div.current within the div.hardware.

My html:

<div class="number"></div>

<div class="hardware">
    <div class="current">1</div>
</div>

<div class="hardware">
    <div class="current">2</div>
</div>

<div class="hardware">
    <div class="current">3</div>
</div>

<div class="hardware">
    <div class="current">4</div>
</div>

I have this:

$(function() {
    $('.hardware').waypoint(function() {
        var addNumber = $(this).find('.current').content();
        $('.number').content(addNumber);
    });
});

but this doesn't work for me.

Solution

  • The jquery method is contents(), not content()

    $(function() {
 $('.hardware').waypoint(function() {
    var addNumber = $(this).find('.current').contents();
    $('.number').contents(addNumber);
 });
});

    P.S: contents() method even retrieves comment nodes. For getting the text content from an element, it's better to use text() method.