FindThis

by TrueBlueAussie

HTML

<ul>
    <li> <a>
      <button>click me</button>
      <img src="..." />
    </a>

    </li>
    <li> <a>
      <button>click me</button>
      <img src="..." />
    </a>

    </li>...</ul>
<ul>
    <li> <a>
      <img src="..." />
    </a>

        <button>click me</button>
    </li>
    <li> <a>
      <img src="..." />
    </a>

        <button>click me</button>
    </li>...</ul>

JavaScript

// Add findThis method to jQuery (with a custom :this check)
jQuery.fn.findThis = function (selector) {
    // If we have a :this selector
    if (selector.indexOf(':this') > 0) {
        var ret = $();
        for (var i = 0; i < this.length; i++) {
            var el = this[i];
            var id = el.id;
            // If not id already, put in a temp (unique) id
            el.id = 'id' + new Date().getTime();
            var selector2 = selector.replace(':this', '#' + el.id);
            ret = ret.add(jQuery(selector2, document));
            // restore any original id
            el.id = id;
        }
        ret.selector = selector;
        return ret;
    }
    // do a normal find instead
    return this.find(selector);
}

// Test case
$(function () {
    $('a').click(function () {
        $(this).findThis('li:has(:this) button').css({
            "border": '3px solid red'
        });
    });
});