Is it more efficient to query on parent selectors or to append selectors to all children?

Vote count: 0

I have 2 mirror sections on my DOM, one for delivery and one for pickup, where for each of the two, you have the same content, e.g.,:

<div class="main-section">
  <div class="description-content">
    <p><span class="to-emphasize"></span></p>
  </div>
  <div class="field-content">
    <input type="text" name="address"></input>
  </div>
  <div class="table-content">
    <table>
      <thead>
        <tr>
          <td></td>
        </tr>
      </thead>
    </table>
  </div>
</div>

And so forth... basically really meaty chunks of elements. I'm wondering, as my jQuery requires quite a bit of targeting/ retargeting... what would be more efficient from the below options? Looking for any rules of thumb around this, rather than personal preferences for style. Thanks!

Strategy A, add delivery/pickup selector to parent and query on parent

<div class="main-section" data-type="delivery">
  <div class="description-content">
    <p><span class="to-emphasize"></span></p>
  </div>
  <div class="field-content">
    <input type="text" name="address"></input>
  </div>
  <div class="table-content">
    <table>
      <thead>
        <tr>
          <td></td>
        </tr>
      </thead>
    </table>
  </div>
</div>

// example of jQuery code
$(".main-section[data-type='delivery'] input[name='address']").val("new value")
$(".main-section[data-type='delivery'] .to-emphasize").empty()
$(".main-section[data-type='delivery'] .to-emphasize").append("new value")
delivery_or_pickup = $(this).parents(".main-section").data("type")
$(".main-section[data-type='"+delivery_or_pickup+"']").hide()

Strategy B, add delivery/pickup selector to all children that need querying

<div class="main-section" data-type="delivery">
  <div class="description-content" data-type="delivery">
    <p><span class="to-emphasize" data-type="delivery"></span></p>
  </div>
  <div class="field-content" data-type="delivery">
    <input type="text" name="address" data-type="delivery"></input>
  </div>
  <div class="table-content" data-type="delivery">
    <table>
      <thead>
        <tr>
          <td></td>
        </tr>
      </thead>
    </table>
  </div>
</div>

// example of jQuery code
$("input[name='address'][data-type='delivery']").val("new value")
$(".to-emphasize[data-type='delivery']").empty()
$(".to-emphasize[data-type='delivery']").append("new value")
delivery_or_pickup = $(this).data("type")
$(".main-section[data-type='"+delivery_or_pickup+"']").hide()

asked 18 secs ago

james

Let's block ads! (Why?)

Is it more efficient to query on parent selectors or to append selectors to all children?