Блог

Пожалуйста, обратите внимание: этот вопрос очень похож на ряд других вопросов, которые я нашел здесь, но он не дублируется, поэтому, пожалуйста, внимательно прочитайте:

По сути, я хочу исключить узел и все его потомки из коллекции по (скажем) имени класса.

Расширение, которое я сделал (проверьте фрагмент), идеально работает в данном примере, однако я готов найти более простой / элегантный способ сделать это (если он существует в jquery в настоящее время).

Я ищу общий способ выполнения $(this).find('<some_selector>').exclude_found_nodes_that_have_the_following_between_aforementioned_this_and_itself('<exclusion_selector>') , однако что-то вроде $(this).find('<exclusion_selector>:ignore_branch_if_this_node_met() <some_selector>') тоже справилось бы с этой задачей.

Идентификаторы на самом деле не присутствуют в коде, они добавляются исключительно в демонстрационных целях («начальный узел» выбирается пользователем).

 $.fn.find_exclude = function(original_selector,exclude_selector) {
  var counter=$(this).parents(exclude_selector).length;
  if ($(this).is(exclude_selector)){
    counter  ;
  }
  var tmp=$(this).find(original_selector); 
  return tmp.filter(function(){
      if($(this).is(exclude_selector) || $(this).parents(exclude_selector).length>counter){
        return false;
    }
      return true
    });
};

$(function(){
  var all_b_in_main_not_in_groups=$("#main").find_exclude('b','.group');
  var all_b_in_inner_not_in_groups=$("#inner").find_exclude('b','.group');
  
  all_b_in_main_not_in_groups.each(function(){
    $(this).css('color','red');
  });
  all_b_in_inner_not_in_groups.each(function(){
    $(this).css('opacity','0.5');
  });
  
  
  
}) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<span id="main">
<b>I should be red</b>
<div class="group" id="inner">
  <span>
    <b>I should be opaque but not red</b>
  </span>
</div>
<div>
  <b>I should be red</b>
  <div class="group">
     <b>Don't touch me, please.</b>
        <div>
          <b>Don't touch me, please.</b>
            <p>
              <b>Don't touch me, please.</b>
            </p>
        </div>
  </div>
</div>
</span> 

ПРЕДУПРЕЖДЕНИЕ: прежде чем предлагать просто использовать :not или .not() или даже какое-либо использование .clone() , пожалуйста, перечитайте вопрос и приведенный пример еще раз и проверьте, действительно ли ваше решение работает — предлагаемое решение должно работать с обоими #main и #inner в качестве начальных узлов (без фактического знания селектора начального узла — они известны как $(this) click прослушиватель событий внутри)

 function customFind (findWhere, findWhat, ignoreWhat){
    var totalIgnore = $(findWhere).find(ignoreWhat   ' '   findWhat);
    return $(findWhere).find(findWhat).not(totalIgnore);
}
 

Используйте:

 var zzz= customFind(this,"b",".group");
zzz.css('text-decoration','underline');
 

Вы могли бы использовать следующую версию плагина. Он использует тот факт, что .not() может принимать другой выбор jQuery:

 $.fn.find_exclude = function(original_selector, exclude_selector) {
    return $(this).find(original_selector).not(exclude_selector)
            .not($(this).find(exclude_selector).find(original_selector));
}

$(function(){
  var all_b_in_main_not_in_groups = $("#main").find_exclude('b','.group');
  all_b_in_main_not_in_groups.css('color', 'red');

  var all_b_in_inner_not_in_groups = $("#inner").find_exclude('b','.group');
  all_b_in_inner_not_in_groups.css('opacity', '0.5');
}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="main">
    <b>I should be red</b>
    <div class="group" id="inner">
      <span>
        <b>I should be opaque but not red</b>
      </span>
    </div>
    <div>
      <b>I should be red</b>
      <div class="group">
         <b>Don't touch me, please.</b>
            <div>
              <b>Don't touch me, please.</b>
                <p>
                  <b>Don't touch me, please.</b>
                </p>
            </div>
      </div>
    </div>
</span> 

Последнее .not() является основной частью: оно исключает узлы, которые являются потомками исключаемых родителей. В случае, если узел удовлетворяет как исходному, так и селектору исключения, он не будет исключен этим .not() , и поэтому .not() для обработки этих случаев применяется другой (первый).

Не связано с вашим вопросом, но обратите внимание, что вам не нужны .each() циклы для применения .css() вызова метода. Вы можете применить его непосредственно к выделенному jQuery.

Альтернатива: не искать исключенные поддеревья

В комментариях вы спросили, можно ли выполнить поиск, для которого не нужно сначала сопоставлять все узлы с помощью исходного селектора, чтобы затем удалить те, которые должны быть исключены в соответствии с селектором исключения.

Это можно сделать, выполнив поиск узла с помощью рекурсивного вызова функции (поиск в глубину), опуская этот рекурсивный поиск при достижении узла, который должен быть исключен:

 $.fn.find_exclude = function(original_selector, exclude_selector) {
    if ($(this).length == 0) return $();
    var $elems = $(this).children().not(exclude_selector);
    return $elems.filter(original_selector)
                 .add($elems.find_exclude(original_selector, exclude_selector));
}
 

Однако обратите внимание, что DOM API относительно быстро находит узлы с помощью селекторов (ср. .querySelectorAll используется jQuery), поэтому выполнение этого «самостоятельно» с помощью этой альтернативы сопряжено с некоторыми накладными расходами, что в конечном итоге может потребовать больше времени, чем при использовании первого метода. Это зависит от того, насколько велики поддеревья ниже исключаемых узлов. Чем они больше, тем более вероятно, что альтернативный рекурсивный метод работает лучше. Но я думаю, что в «нормальных» ситуациях первое решение будет быстрее.