CODEWITHSUNDEEP
javascriptjquerytextjquery-selectors
Procos
Procos

Reputation: 94

jQuery change text of all next elements

I would like to get all next specific class Elements and change the text of them. Specifically the number of the entry because i've made an ajax request to delete a record in a datatabse and i don't want to reload the page.

First i get the actual entry number to know which text (or entry Number) should be replaced (for loop)

$entryHeadContent = $this.closest('.entry').find('.entry-head').text();
$entryID = parseInt($entryHeadContent.split('|')[0].replace(/ /g,''));

Then i would like to go through all next entry-heads to change the actual entry number (decrease the number by 1). 

alert($this.nextAll('.entry-head').length); // Is 0

$this.nextAll('.entry-head').each(function(index){
    alert($this.nextAll('.entry-head').length);
    for (i = entryID; i <= $this.nextAll('.entry-head').length; i++) { 
        index.text().replace(i, (i -1)) 
        alert('Index: ' + index + ' | ');
    }
});

But somehow that code don't seems to be executed but i don't get it. Why? $this is the form (test). I'm still in the ajax request (in the .done part of the ajax request.

This is the entry html(tpl) file, for one entry:

<div class="entry">
    <div class="entry-head">
        #{$entryNumber} | 
        Name: {$entry.name}
        ....
    </div>
    <div class="entry-content">
        {$entry.message}
        <form action="index.php?site=entry" class="test" method="post">
            <div class="entry-options">
                <input type="submit" value="Edit" name="edit">
                <input type="submit" value="Delete" onclick="return confirm('Are you sure you want to delete this entry?');" name="delete">

                 <input type="hidden" value="{$entry.id}" name="entryID">
            </div>
        </form>
    </div>
</div>

Upvotes: 0

Views: 886

Answers (1)

kockburn
kockburn

Reputation: 17606

Your code:

$this.nextAll('.entry-head').each(function(index){
    alert($this.nextAll('.entry-head').length);
    for (i = entryID; i <= $this.nextAll('.entry-head').length; i++) { 
        index.text().replace(i, (i -1)) 
        alert('Index: ' + index + ' | ');
    }
});

Doesn't it seem weird to you that you do index.text(); . Seeing that index is just a number and not a jquery object. .each() also comes with a second parameter in the callback. function(index, value){}

$this.nextAll('.entry-head').each(function(index, value){
    alert($this.nextAll('.entry-head').length);
    for (i = entryID; i <= $this.nextAll('.entry-head').length; i++) { 
        $(value).text().replace(i, (i -1)) 
        alert('Actual Index: ' + index + ' | ');
    }
});

I would think this would work better?

Update:

I made a demo partially working. Before I continue, tell me if I'm on the same wavelength as you.

Update:

Bugged --> demo2

Fixed --> Demo3

   $('.test').on('submit', function (e) {
    e.preventDefault();

    var $this = $(this);
    var $this2 = $this.closest('.entry').find('.entry-head');
    var $entryID = parseInt($this2.text().split('|')[0].replace(/ /g,''));
    alert($entryID);
    var $entries = $('.entry-head').not($this2).filter(function(){
        return parseInt($(this).text().split('|')[0].replace(/ /g, '')) > $entryID;
    }); // Is 0

    $entries.each(function (index, value) {
            var id = $entryID + index + 1;
            $(value).text($(value).text().replace(id, (id-1)));
            console.log('Index: ' + index + ' | ' + $entryID);
    });
});

Upvotes: 3

Related Questions