SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    jQuery - find and manipulate matched attribute values

    Code HTML4Strict:
    <div id="veg">
    <a title="Tree" href="x.html"><a>
    <a title="Leaf" href="y.html"><a>
    </div>
     
    <div id="pic">
    <img title="Tree" src="tree_1.jpg" />
    <img title="Leaf" src="leaf_1.jpg" />
    <img title="Leaf" src="leaf_2.jpg" /> 
    </div>
    The above is a primitive and unlikely example, but lets say I want to achieve the following outcome for the two anchors:

    Code HTML4Strict:
    <a title="Tree" href="x.html">Tree<a>
    <a title="Leaf" href="y.html">Leaf<a>
    Each anchor is unique, but the title attribute may match the exact title of one or more images. Where a match is found, either once or more, the title text is copied - once - into the anchor element.

    How to do with jQuery?

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,067
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Key here is that both anchors are in the div with id "veg", so you could just do :

    Code:
    $('#veg a').each( function() {
      $(this).text( $(this).attr('title') );
    });
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your lightning response. That's certainly a suitable solution for the inadequate example I provided.

    Let's say I want to be difficult, and insist that the process requires the match between title attributes. How would this be achieved?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,067
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Victorinox View Post
    Thanks for your lightning response. That's certainly a suitable solution for the inadequate example I provided.

    Let's say I want to be difficult, and insist that the process requires the match between title attributes. How would this be achieved?
    Like this?

    Code javascript:
    $('a').each(function() {
      if ($('[title="' + $(this).attr('title') + '"]').size() > 1) {
        $(this).text( $(this).attr('title') );
      }
    });
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yep, that works mighty fine (especially with correctly closed anchors ).

    Thanks again.


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
  •