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

Question

我尽量命名标题。我有点难以解释。

我正在编写的一些代码（在我的 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/

对于此事的任何帮助将不胜感激。

Answer 1

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

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

演示：Fiddle

它会给容器类wordpress-post1，然后你可以用它来查找任何后代元素。

Answer 2

根据直接 cmets，对多个元素使用 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 div 标记为“wordpress-post”类，然后有一个更具体的 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'));
});

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

Answer 3

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

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

我希望这会有所帮助。快乐编码！

Answer 4

如果您想拥有多个 ID，这会有所帮助：

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

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

FIDDLE

更新：声明一个全局变量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>

DEMO