jQuery .siblings()/.closest() vs. global

Benchmark created by ivan on August 22, 2014

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form class="row">
<div class="request-step step4" data-js-paginator-step="4">
<div class="" data-js="step-content">
<fieldset>
    <legend data-js="legend">Title 4</legend>
<table class="table table-condensed invoice" data-js="invoice">
    <tbody>
    <tr>
        <td class="brand-logo">
            <img src="http://placehold.it/80" alt="" data-js="brand-image" />
        </td>
        <td>
            <h3 data-js="invoice-objname"></h3>
            <div data-js="invoice-objbundle"></div>
        </td>
        <td class="priceinput">
            <div class="imgExt input-prepend">
                <span class="add-on"><i class="fa fa-dollar"></i></span>
                <input class="invoice-objprice" data-js="invoice-objprice-step4"
                    type="text" placeholder="Enter Price">
            </div>
        </td>
    </tr>
    <tr class="invoice-total" data-js="invoice-total">
        <td colspan="2">Total Price</td>
        <td data-js="price-total">$0</td>
    </tr>
    </tbody>
</table>
</fieldset>
</div>
</div>
</form>

Test runner

var price = $('[data-js="invoice-objprice"]');
var legend = price.closest('[data-js="invoice"]').siblings('[data-js="legend"]');

var price = $('[data-js="invoice-objprice"]');
var legend = $('[data-js="legend"]');

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by ivan on August 22, 2014