Giter VIP home page Giter VIP logo

jquery-nearest's Introduction

jQuery.nearest

A combination of jQuery.find and jQuery.closest, to find the element that matches the selector that is somewhere nearby :-)

<div class="container">
  <span class="label"><label>my label</label></span>
  <span class="input"><input type="text" data-original="test" /> <a href="" style="display: hidden;" class="revert">revert</a></span>
</div>
$('.container :input').on('keydown change', function()
{
  if ( this.value != $(this).data('original'))
  {
    $(this).nearest('.revert').show();
    $(this).nearest('label').addClass('changed');
  }
  else
  {
    $(this).nearest('.revert').hide();
    $(this).nearest('label').removeClass('changed');
  }
});

$('.revert').click(function()
{
  $(this).nearest(':input').val($(this).nearest(':input').data('original')).trigger('change');
});

And now, you could more-or-less completely change the HTML around, and your stuff won't break. Designers and developers can hug again!

<div class="container">
  <span class="label"><label>my label</label></span>
  <span class="input"><input type="text" data-original="test" /></span>
  <span class="actions"><a href="" style="display: hidden;" class="revert">revert</a></span>
</div>

It works by calling jQuery.find at the current node, then its parent, and so on until it gets a match, or it's at the top of the DOM.

If you have a ton of HTML elements, or it's possible the thing you're looking for isn't gonna be there, performance takes a hit looking (eventually) at the entire DOM for your item(s). So you can pass a "container" as a second arg, and nearest will search within there first:

$(this).nearest('.revert', '.container');

When you use it this way, it almost the same as $(starting).closest(container).find(search), with the addition that if the search is the container, it will be returned.

jquery-nearest's People

Contributors

colinta avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

yanguanglan

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.