jQuery get an id out of Object

JavaScript
1

there are some jQuery basics I’m missing:


alert($data);
// returns [object Object]



alert($data.htm());
// returns arg $data =
//                    <img src="img/boat_2_view.png" alt="" height="" width="" class="test">
//                    <p class="color">Lime</p>
//                    <p class="msrp">MSRP <span>$1045</span></p>
//                    <p>
//                        third boad third boad third boad third boad third boad third boad third boad
//                        third boad third boad third boad third boad third boad third boad third boad
//                        third boad third boad third boad third boad third boad third boad third boad
//                        third boad third boad third boad third boad third boad third boad third boad
//                    </p>

what do I have to do to make a variable equal to the images class?

In other words how can I pull information out of $data?

2

Hi,

I’m not sure that I have understood what you are trying to do correctly, but try logging $data to the console:

console.log($data);

maybe that helps.

If not could you rephrase your question?

3

yes, sorry…

I’m using the onSlideAfter callback on the bxSlider plugin http://bxslider.com/options

one of it’s arguments is $slideElement which the markup being changed in the carousel rotation.

I need to access some markup, classes, ids, etc in that <li> element that is being carouseled.

So normally if selecting say anything from the DOM you would just do a simple selector to access any elements class.

But the data I need is not in the DOM, it’s in the callback argument.

So when I alert out the callback argument, $slideElement.html(), I get this snippet:


arg $slideElement =
                    <img class="mainPic1" src="img/boat_2_view.png" alt="" height="" width="">

what syntax do I use to extract information out of $slideElement?

4

Hi,

Can you provide a link to the page where you have the bxSlider implemented?
It shouldn’t be too difficult to do what you want, but it would help to have some code we could both work off.

5

It’s on my local only right now. I can try to post to public URL later tonight.

Until then could you point me in the right direction of what to Google? I get the feeling this is just a fundamental way jquery works, but I’ve only ever queried the DOM, like the common:


var class = $('img').attr('class');

where this time what I’m trying to do is like:


var class = $slideElement('img').attr('class');

or


var class = ('img', $slideElement).attr('class');
6

i did console.log($slideElement); like you recommended. There are 2 screen shots attached. When I expand the object in FireBug console I see the data I need. I’m just not sure of the syntax to get it.

7

Alright, I finally got off my backside and did some investigating :slight_smile:
The crux of the matter is what $slideElement actually is.
It turns out that it is a jQuery object (which I probably should have guessed by the prefixed dollar sign)

I took the standard demo off the bxSlider homepage and did this:

$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true,
  onSlideAfter: function($slideElement, oldIndex, newIndex){console.log($slideElement[0])}
});

Which returns this:

<li style="float: none; list-style: none; position: absolute; width: 730px; z-index: 50;">
  <img src="/images/730_200/hill_road.jpg" title="The long and winding road">
  <div class="bx-caption">
    <span>The long and winding road</span>
  </div>
</li>

So I then did this:

$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true,
  onSlideAfter: function($slideElement, oldIndex, newIndex){console.log($slideElement.find("img").attr("title"))}
});

which returns “The long and winding road”.

So, to summarize, as $slideElement is a jQuery object, you can use the find method on it.

8

In this particular case wouldn’t .children(‘img’) have less of a speed hit since we know the img element is a first level child to the object/li element?

I get using find if we didn’t know that or were trying to get the text of the span in the caption ( though at that point you may as well just get the inner html and plan for the formatting ) but, in the case of .find my understanding is that it will essentially be checking every dom element whether or not it returns anything past the first subtree because there might possibly still be a match. Do I have the wrong of this?

9

Hey Belsnickle,

Good question.

Here’s what the jQuery docs say:

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

The way I had always understood this, was that you call find() on a jQuery object and it will traverse the entirety of that object, looking for what you specified.

Actually answering this question got me interested in what jQuery is doing under the hood at this point.
I had a look through the code of the latest 1.x jQuery version (v1.10.2) and the .find() method is implemented thus:

find: function( selector ) {
  var i,
    ret = [],
    self = this,
    len = self.length;

  if ( typeof selector !== "string" ) {
    return this.pushStack( jQuery( selector ).filter(function() {
      for ( i = 0; i < len; i++ ) {
        if ( jQuery.contains( self[ i ], this ) ) {
          return true;
        }
      }
    }) );
  }

  for ( i = 0; i < len; i++ ) {
    jQuery.find( selector, self[ i ], ret );
  }
  
  // Needed because $( selector, context ) becomes $( context ).find( selector )
  ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret );
  ret.selector = this.selector ? this.selector + " " + selector : selector;
  return ret;
}

As you can see, the first part of the method is just declaring some variables and the ‘if block’ can be ignored in this case, as we are passing it a string ($slideElement.find("img")).
In the for block, jQuery is handing things off to the Sizzle selector engine, so I logged the values of the parameters to the console:

console.log(selector, self[ i ], ret);
for ( i = 0; i < len; i++ ) {
    jQuery.find( selector, self[ i ], ret );
 }

This produced:

img
<li style="float: none; list-style: none; position: absolute; width: 730px; z-index: 50;"> ... </li>
undefined

which at least proves that .find() is searching the entire object it is passed.

The implementation of .children(), looks like this:

children: function( elem ) {
  return jQuery.sibling( elem.firstChild );
}

Which simply calls the .sibling() method on the first child of the element it is passed.
The .sibling() method presumably returns the siblings of any element it is passed (in this case there are none), thus the image we are interested in is returned.

So, it seems that given the fact that .children() will only deal with first-level children of the jQuery object it is called on whereas .find() will traverse the whole object, in this case it would indeed more efficient to use .children('img').

However …

Just to be sure, I created a test case on jsperf and rather confusingly, this proved the opposite true.

Can you have a look at it. Did I setup something incorrectly?

10

No it seems like you’re correct, apparently it’s there’s a pretty unexpected technical reason for it which your code snippet that being that .children is using the .siblings function in jquery which seems to be using [URL=“http://james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.children”]four potential loops (from .map and .unique) as opposed to the[URL=“http://james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.find”] two that get called on .find() if you’re only traversing one level down. In addition to it leveraging the browsers better.

That’s quite the interesting result.