jQuery更改所有下一个元素的文本

Posted 2023-02-25

【中文标题】jQuery更改所有下一个元素的文本

【英文标题】：jQuery change text of all next elements

【发布时间】：2015-04-22 13:59:21

【问题描述】：

我想获取所有下一个特定类元素并更改它们的文本。特别是条目的数量，因为我已经发出 ajax 请求来删除数据表中的记录，并且我不想重新加载页面。

首先我得到实际的条目号以知道应该替换哪个文本（或条目号）（for循环）

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

然后我想通过所有下一个条目来更改实际条目号（将数字减 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 + ' | ');
    
);

但不知何故，该代码似乎没有被执行，但我不明白。为什么？ $this 是表格（测试）。我还在 ajax 请求中（在 ajax 请求的 .done 部分。

这是条目 html(tpl) 文件，一个条目：

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

【问题讨论】：

你在$(document.ready()) 中有$this.nextAll('.entry-head').each(function(index) 对吗？

听起来只能在 CSS 中完成，例如：css-tricks.com/almanac/properties/c/counter-increment

是的，它在 $(document.ready()) 中

【参考方案1】：

您的代码：

$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 + ' | ');
    
);

你这样做是不是觉得很奇怪 index.text(); 。看到该索引只是一个数字而不是一个 jquery 对象。 .each() 还带有回调中的第二个参数。 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 + ' | ');
    
);

我认为这会更好？

更新：

我做了一个demo 部分工作。在我继续之前，告诉我我是否和你在同一个波长上。

更新：

错误 --> demo2

已修复 --> 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);
    );
);

【讨论】：

当您学习如何编程时，似乎没有什么“奇怪”的，不过答案是 +1

我看到你补充说 $this.nextAll('.entry-head').length 返回 0。你能在你的帖子中添加你的 $this 是什么吗？ @Procos，谢谢。

@Procos 我正在解决您的问题。我知道你做错了什么。

@Procos 我有一个部分解决方案。在我继续之前，让我知道这是否符合您的预期。

@Procos 实际上有一个小错误.. 修复它