2013-10-28 3 views
4

Существует ли подходящий способ определения того, имеет ли элемент (любой элемент), ближайший к целевому элементу, z-индекс?Определить ближайший элемент с z-индексом?

Например, я добавляю div к слою DOM, и я хочу знать, есть ли элемент рядом с этим div с z-индексом, поэтому я могу поместить этот div соответственно, чтобы он не терялся под слоями потому что я не знаю, где и когда он будет добавлен.

Спасибо!

EDIT:

У меня есть намек плагин, который присоединяет намеки на страницу динамически, а затем сохраняет их на сервере. Я бы опубликовал код, но, боюсь, это не будет иметь большого значения для моего вопроса.

+0

показать свой код здесь? – nrsharma

ответ

2

Я бы создал функцию, подобную приведенной ниже. Она проходит через каждый из родителей и проверки элемента, если он имеет Z-индекс

function getElement($target){ 
     var $parents = $target.parents(); 
     for(var i=0;i<$parents.length;i++){ 
      if($parents[i].css('z-index').length>0){ 
       return $parents[i]; 
      } 
     } 
     return false; 

    } 
+0

Хорошая идея, хотя я чувствую, что это может быть довольно медленным, так как в то же время происходит много обходов для всех намеков, которые прилагаются. Я собираюсь ограничить родителей() фиксированным количеством уровней и попробовать это. Благодарю. – nainy

+0

Несомненно. Это хорошая идея. – Sethunath

+0

@nainy метод parent() возвращает массив с первым членом, являющимся ближайшим родителем. Таким образом, вышеупомянутый ответ будет проверяться от ближайшего элемента до самого дальнего. Поэтому я думаю, что это не приведет к слишком много обходов, но минимальное количество обходов, необходимых для получения ответа. Может быть хорошей идеей получить массив элементов определенного типа, с которым вы хотите проверить, если это так. –

-1

Вы можете использовать Firefox firebughttps://getfirebug.com/ или Chrome Developer Tools (встроенный в Chrome), чтобы inspect the element вы хотите, чтобы найти г-индекс.

Добавление элемента рядом с другим div не связано с свойством z-index. z-index приведет к тому, что элементы с наивысшим числом впереди, когда объекты перекрываются. В противном случае это не тот объект, который вы ищете. Особенно, если вы не определили какие-либо свойства z-index для других элементов.

CSS специфика это то, что вы могли бы искать here

+0

Извините, я думаю, вы неправильно поняли мой вопрос, может быть, моя вина. Мне нужно убедиться, что div I append будет (по крайней мере, более или менее) на том же уровне с другими элементами на странице. Единственный способ, которым я могу это сделать, - как-то определить ближайший возможный z-индекс на том определенном слое, где был добавлен div, а затем украсть его для этого div. Все происходит динамично. – nainy

+0

Почему вы не можете добавить элемент с высоким индексом z? например, 1000. Таким образом, он всегда будет впереди. – MCSharp

+0

Таким образом, он может быть слишком высоким (это означает, что все подсказки будут всплывать поверх слоев, на которых они не должны быть) или слишком низко (много слоев, модалов и всплывающих окон с высокими z-индексами). – nainy

0

Му аналогичное решение, как один из Sethunath.

/** 
* Helper to retrieve the z-index which is required to bring up the dragged element in front. 
* @returns {undefined} 
*/ 
getZIndex: function() { 
    if (this.z_index === undefined) { 

     var recrusive_z_index_search = function(element) { 

      // Break on body. 
      if (element[0] === $('body')[0]) { 
       return 2; 
      } 

      // Get parent element 
      var parent = $(element).parent(); 

      // Check if parent has z-index 
      var z_index = parent.css('z-index'); 
      if (z_index.length > 0 && !(/\D/).test(z_index)) { 

       // Return found z-index. 
       return z_index; 
      } 

      // Z-index not found, try again on next parent. 
      return recrusive_z_index_search(parent); 
     }; 

     this.z_index = recrusive_z_index_search($(this.element)); 

    } 
    return this.z_index; 
}, 

Это решение было добавлено в класс объектов. Этот элемент является отправной точкой для поиска. Он останавливается, когда мы обнаружили элемент с z-индексом, который действительно не имеет числового значения, потому что z-index также может быть установлен на «auto». Если мы достигли тела, мы сломаем цепочку и установим ее по умолчанию как резерв.

Надеюсь, это поможет другим.

Смежные вопросы