在父选择器上查询或向所有子项添加选择器效率更高吗？

问题描述：

我有我的DOM 2个镜面部分，一为delivery，一个用于pickup，其中每一个两个，你有相同的内容，例如，：在父选择器上查询或向所有子项添加选择器效率更高吗？

<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>

，...等基本真肉元素的元素。我想知道，因为我的jQuery需要相当多的定位/重定向...从以下选项中，效率会更高？寻找任何关于此的规则，而不是个人对风格的偏好。谢谢！

策略的，在父母交付/拾音器选择添加到父和查询

<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()

战略B，交付/拾音器选择添加到所有的孩子，需要查询

<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()

答

我认为对此的回答将取决于您的代码的整个范围，并且有任何方法都有可能。如果有相当数量的特定目标，我会建议第二个选项，您将选择器添加到特定元素有两个原因：

1.减键入 - 我会给你的输入需要大量的查询特定ID比你目前选择的要短。即#name。然后每次你需要查询它们时，你都会使用更少的字符。

2.处理效率和速度 - 在给每个输入特定ID之后，将它们存储在变量中，这样jQuery就可以不频繁地进行DOM查找。

var name = $('#name');

这是当你在你的代码中多次查找相同的DOM元素很好的做法。这也是改善代码可读性的好方法。此代码：

$("input[name='address'][data-type='delivery']").val("new value");

可以成为：

address.val("new value");

在父选择器上查询或向所有子项添加选择器效率更高吗？

相关推荐