Question

我试着尽可能地命名这个标题。我有点难以解释。

我正在编写一些我正在编写的代码的问题（在我的wordpress网站上的小部件中运行。）我在这里写的内容模仿了这个问题。只是fyi我对jquery，JS等很新。

我要做的是将变量“thumb”设置为“widget-code”之后的元素。它有效，但它只是在“wordpress-post1”中找到了元素（“拇指类”）

控制台输出是：

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

如果您想拥有多个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

Answer 2

根据即时评论，对多个元素使用id是无效标记。也就是说，将您的ID更改为类：

if (window.FileReader)
    {
        var file   = element.files[0];
        var $input = $(element);
        var $fileName = file.name;
        var reader = new FileReader();
        reader.onload = function(e) {

            var img = document.createElement("img");
            img.src = e.target.result;

            var dataID   = $input.data("questionId");

            var canvasID = "canvas_" + dataID;
            $("#"+canvasID).remove();

            var canvas = document.createElement("canvas");
            canvas.setAttribute("id", canvasID);
            canvas.setAttribute("height", "200");
            canvas.setAttribute("width", "200");

            var heightWidth = getHeightWidth(img);
            canvas.height = heightWidth[0];
            canvas.width  = heightWidth[1];

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img,0,0, canvas.width, canvas.height);

            var sectionID = "section_" + dataID;
            $("#" + sectionID).append(canvas);

            $("#file_title-" + dataID).val($fileName);
        }

        reader.readAsDataURL(file);
   }
   else
   {
        alert("This browser does not support image uploading.");
   }

允许您使用如下的jQuery选择器：

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

但是，如果我可以提出建议，我会说你用word＆＃34; wordpress-post＆＃34;标记每个wordpress-post div。然后有一个更具体的id，这是你想要打印的值。

然后它会是这样的：

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

和你的javascript一样（使用jQuery）：

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

甚至更简单：

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

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

Answer 3

纯粹的javascript方法：

这只是一种解决方法，因为您无法控制ids或classes，这会定位页面上的所有div元素，循环遍历它们并搜索包含wordpress-post的任何div元素在班级名称中。

＆＃13;

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);
   }
}}

＆＃13;

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

＆＃13;

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

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

Answer 4

如果你想讨厌讨厌，请尝试

<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，然后您可以使用它来查找任何后代元素。

$（）。next（）多次返回相同的元素

4 个答案: