$().next()多次返回相同的元素

$().next() returning the same element multiple times

本文关键字：元素 next 返回      更新时间：2023-09-26

我尽力为标题命名。这对我来说有点难解释。

我有一些代码的问题，我正在写(它运行在我的wordpress网站上的一个小部件)。我在这里所写的内容模拟了这个问题。仅供参考，我对jquery, JS等非常陌生。

我要做的是将变量"thumb"设置为"widget-code"之后的元素。它可以工作，但是它只在"wordpress-post1"

中找到元素("thumb-class")

控制台输出为:

wordpress-post1
wordpress-post1
wordpress-post1

但应该是:

wordpress-post1
wordpress-post2
wordpress-post3

这是实际代码

<div class="wordpress-post1">
    <div id="widget-code">
        <script>
            $(document).ready(function(){
                var thumb = $("#widget-code").next();
                console.log(thumb[0].parentElement.className);
             });
        </script>
    </div>
    <div class="thumb-class">
    </div>
</div>
<div class="wordpress-post2">
    <div id="widget-code">
        <script>
            $(document).ready(function(){
                var thumb = $("#widget-code").next();
                console.log(thumb[0].parentElement.className);
             });
        </script>
    </div>
    <div class="thumb-class">
    </div>
</div>
<div class="wordpress-post3">
    <div id="widget-code">
        <script>
            $(document).ready(function(){
                var thumb = $("#widget-code").next();
                console.log(thumb[0].parentElement.className);
             });
        </script>
    </div>
    <div class="thumb-class">
    </div>
</div>

我要试着再澄清一点:

这段代码被放置在我使用的wordpress主题提供的html小部件中。它钩在每根柱子上。这是我唯一能放代码的地方，也是我唯一写过的代码。(我没有以任何方式改变主题的文件)

我无法控制类或id的名称。它们是动态的。可以存在无限数量的职位。因此，我不能硬编码任何东西。

为了使这段代码正常工作，它需要在它运行的帖子中找到"widget-code"元素的兄弟元素。

这是JSFiddle上的代码链接:http://jsfiddle.net/pattnvy3/

感谢您对此事的帮助。

如果你想要一个令人讨厌的黑客，试试

<div class="wordpress-post1">
    <div id="widget-code">
        <script>
            $(document).ready(function(){
                var c = window['widget-code-counter'] || 0;
                window['widget-code-counter'] = ++c;
                var className = 'wordpress-post' + c;
                console.log(className);
             });
        </script>
    </div>
    <div class="thumb-class">
    </div>
</div>

演示:小提琴

它将给出容器类wordpress-post1，然后您可以使用它来查找任何后代元素。

根据立即的注释，对多个元素使用id是无效的标记。也就是说，将id更改为这样的类:

<div class="wordpress-post[some-number-here]">
    <div class="widget-code">
    </div>
    <div class="thumb-class">
    </div>
</div>

将允许你像这样设置一个jQuery选择器:

$('.widget-code').each(function (){
    var thumb = $(this).next();
    console.log(thumb[0].parentElement.className);
});

然而，如果我可以提出一个建议，我会说你用"wordpress-post"类标记你的每个wordpress-postdiv，然后有一个更具体的id，这是你想要打印的值。

那么它看起来就像这样:

<div id="wordpress-post[some-number-here]" class="wordpress-post">
    <div class="widget-code">
    </div>
    <div class="thumb-class">
    </div>
</div>

和你的javascript像这样(使用jQuery):

$('.widget-code').each(function (){
    var post = $(this).closest('.wordpress-post');
    console.log(post.attr('id'));
});

或者更简单:

$('.wordpress-post').each(function (){
    console.log($(this).attr('id'));
});

取决于你的需要。如果你对你需要什么有任何疑问，请随时发表评论，我会尽快回复你。

纯javascript方法:

这只是一个变通方法，因为您无法控制ids或classes，这将针对页面上的所有div元素，通过它们循环并搜索类名称中包含wordpress-post的任何元素。

window.onload=function(){
var posts=document.getElementsByTagName('div');
 for(var i=0; i<posts.length; i++){
   if(posts[i].className.indexOf("wordpress-post")> -1){
     console.log(posts[i].className);
     //Snippet Use 
     alert(posts[i].className);
   }
}}
<div class="wordpress-post1">
    <div id="widget-code"></div>
    <div class="thumb-class"></div>
</div>
<div class="wordpress-post2">
    <div id="widget-code"></div>
    <div class="thumb-class"></div>
</div>
<div class="wordpress-post3">
    <div id="widget-code"></div>
    <div class="thumb-class"></div>
</div>

如果你有任何问题，请在下面留言，我会尽快回复你。

我希望这对你有帮助。编码快乐!

如果你想有多个id，这可以帮助你:

$(document).ready(function(){
    $("[id^=widget-code]").each(function(){
        console.log(this.parentElement.className);
    });
});

但是，仍然不建议使用多个相同的id。

小提琴

Update:声明全局变量var i=0;并保持自增，如下:

<div class="wordpress-post1">
    <div id="widget-code">
        <script>
            var i=0;
            $(document).ready(function(){
                var thumb = $("[id^=widget-code]").next();
                console.log(thumb[i++].parentElement.className);
             });
        </script>
    </div>
    <div class="thumb-class">
    </div>
</div>
<div class="wordpress-post2">
    <div id="widget-code">
        <script>
            $(document).ready(function(){
                var thumb = $("[id^=widget-code]").next();
                console.log(thumb[i++].parentElement.className);
             });
        </script>
    </div>
    <div class="thumb-class">
    </div>
</div>
<div class="wordpress-post3">
    <div id="widget-code">
        <script>
            $(document).ready(function(){
                var thumb = $("[id^=widget-code]").next();
                console.log(thumb[i++].parentElement.className);
             });
        </script>
    </div>
    <div class="thumb-class">
    </div>
</div>

相关文章：