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

This was something i found on the web. 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:

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()的调用实际上与任何元素都不匹配；请参见比较此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屋！