jQuery 选择器返回 prevObject 而不是普通元素 [英] jQuery selector returns prevObject instead of normal element

问题描述

我在使用 Jquery 选择元素时遇到了一些问题.当我尝试选择一个元素时:

I have some problems with selecting elements, with Jquery. When i try to select a element:

var images = $("#htmlChunk").find("img.Thumb");
console.log(images);

我得到了这个结果:

>[<img>, <img>, prevObject: e.fn.e.init[1], context: #document, selector: "#htmlChunk img.Thumb"]

是什么导致了这个返回结果?我尝试了一些东西，但仍然没有得到我想要的结果.

What is causing this returned result? I tried some things but still dont get the result i wanted.

我试图包装代码以避免冲突.我试图清除对象

i tried to wrap the code to avoid conflict's. i tried to clear the object

这是我在网上找到的.http://drupal.org/node/272557

var images = $("#htmlChunk")['prevObject'].find("img.Thumb");

我现在得到一个对象，但这也不是我想要的.

i get returned a object now, but thats also not what i wanted.

我加入了这个项目，所以我对脚本并不熟悉.我试图在 js 文件中搜索 prevObject 但找不到.

I jumped into this project so i am not well-known with the script. i tried to search for prevObject in the js files but could'nt find any.

我认为问题在于它干扰了其他一些 javascript 文件.有任何想法吗?方向?

I think the problem is that it is interfering with some other javascript file. any ideas? directions?

htmlChunk:

<div id="htmlChunk">
    <div class="ngg-albumoverview">
        <div class="ngg-album-compact">
            <div class="ngg-album-compactbox">
                <div class="ngg-album-link">
                    <a class="Link" href="http://........">
                        <img class="Thumb" alt="Personeelsevent" src="http://.........">
                    </a>
                </div>
            </div>
            <h4><a class="ngg-album-desc" title="Personeelsevent" href="http://.....">Personeelsevent</a></h4>
            <p><a href="http:///.......">bekijk dit album</a></p>
        </div>
    </div>
</div>

推荐答案

您的 images 变量是一个 jQuery 对象，因此您在浏览器控制台中看到的输出似乎就是该对象.具体输出表明对 .find() 的调用实际上不匹配任何元素；比较 this jsFiddle(在 Chrome 中)的两个控制台输出.

Your images variable is a jQuery object, so what you're seeing output in your browser's console seems to be that object. The specific output suggests that the call to .find() isn't actually matching any elements; compare the two console outputs from this jsFiddle (in Chrome).

当您调用 jQuery 函数时 - 例如 .find()、.filter() 等 - 缩小或更改匹配元素的列表在现有的 jQuery 对象上，生成的 jQuery 对象还包含对该函数运行之前状态的引用，这就是您所看到的 prevObject.当您调用 .end() 函数时，它会使用它来恢复.

When you call a jQuery function - such as .find(), .filter(), etc - that narrows down, or changes, the list of matched elements on an existing jQuery object the resulting jQuery object also contains a reference to the state before that function was run, which is what you're seeing as prevObject. This is what it uses to revert back to when you call the .end() function.

让我们分解你的代码:

var images = $(".htmlChunk").find("img.Thumb");

第一部分 - $(".htmlChunk") - 匹配所有具有类 htmlChunk 的元素，并返回包含这些元素的 jQuery 对象.

The first part - $(".htmlChunk") - matches all elements that have the class htmlChunk on them, and returns a jQuery object containing those elements.

然后您调用 .find("img.Thumb") 来查找所有已匹配元素的后代元素(那些具有类 htmlChunk 的元素)满足作为 <img> 元素并在其上具有类 Thumb 的条件.

Then you call .find("img.Thumb") which looks for all elements that are descendents of the already matched elements (those with the class htmlChunk) that satisfy the criteria of being an <img> element and having the class Thumb on them.

您可以使用单个选择器来检索元素，这可能会给您带来更好的结果:

You could use a single selector to retrieve the elements, which might give you better results:

var images = $(".htmlChunk img.Thumb");

如果您想要一个实际 DOM 元素的数组，而不是包含它们的 jQuery 对象，您可以使用 .get() 函数:

If you want an array of the actual DOM elements, rather than a jQuery object containing them, you can use the .get() function:

var elementArray = images.get();

<小时>

解决问题的编辑以包含 HTML:

---

To address the edit to the question to include the HTML:

您正在使用 $(".htmlChunk") 来获取初始元素.但是，该 <div> 元素具有 htmlChunk 的 ID，而不是类，因此代码不会选择您需要的元素.您需要使用以下内容:

You're using $(".htmlChunk") to obtain the initial element. However, that <div> element has an ID, not a class, of htmlChunk so that code won't select the element you need. You'll want to use the following:

var images = $("#htmlChunk").find("img.Thumb");

注意选择器中的 # 而不是 ..

Note the # rather than the . in the selector.

这篇关于jQuery 选择器返回 prevObject 而不是普通元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！