SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    jQuery get an id out of Object

    there are some jQuery basics I'm missing:

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

    Code JavaScript:
    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

    Code JavaScript:
    console.log($data);

    maybe that helps.

    If not could you rephrase your question?

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code JavaScript:
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code JavaScript:
    var class = $('img').attr('class');

    where this time what I'm trying to do is like:
    Code JavaScript:
    var class = $slideElement('img').attr('class');

    or
    Code JavaScript:
    var class = ('img', $slideElement).attr('class');

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Alright, I finally got off my backside and did some investigating
    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:

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

    Which returns this:

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

    Code JavaScript:
    $('.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. #8
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code JavaScript:
    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:

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

    This produced:

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

    Code JavaScript:
    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. #10
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 four potential loops (from .map and .unique) as opposed to the 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •