Как я могу найти все элементы в DOM, имеющие значение z-index

У меня есть таблица в моем коде, которая содержит много строк, и каждая строка содержит несколько td, я хочу найти все td, имеющие значение z-index.

Например -

<table>
    <thead>
        <tr>
            <td>name</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style = "z-index: 10">jhon</td>
        </tr>
        <tr>
            <td>
                doy
            </td>
        </tr>
        <tr>
            <td style = "z-index: 20">jam</td>
        </tr>
    </tbody>
</table>

Может ли кто-нибудь помочь мне найти все td, имеющие значение z-index, без использования какого-либо цикла?

С технической точки зрения это должно работать: $('td[style* = "z-index"]'). В основном вы используете собственный селектор атрибутов.

Terry 22.01.2019 16:18

@Terry Терри, но только для тех элементов, у которых установлен встроенный z-индекс, верно?

OliverRadini 22.01.2019 16:20

@OliverRadini Да. Это то, о чем спрашивает ОП, и это похоже на ваш ответ. Если вы хотите получить вычисляемый стиль, использование element.style также не сработает.

Terry 22.01.2019 16:22

@Terry Терри А, я не могу найти это в вопросе; пример, который они приводят, только указывает их таким образом, но кажется немного ненадежным предположить, что это единственный способ, которым можно установить для них z-index?

OliverRadini 22.01.2019 16:23

Кроме того, нет причин, по которым вы хотите избежать циклов.

Terry 22.01.2019 16:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
40
2

Ответы 2

Вы можете найти все td, а затем отфильтровать те, для которых не задан z-index. Я совершенно уверен, что нет способа сделать первоначальный выбор на более конкретном уровне, чем этот.

const test = [
  ...document.getElementsByTagName("td")
].filter(x => x.style.zIndex !== "")

test.forEach(x => x.style.color = "#"+((1<<24)*Math.random()|0).toString(16))

console.dir(test)
<table>
    <thead>
        <tr>
            <td>name</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style = "z-index: 10">jhon</td>
        </tr>
        <tr>
            <td>
                doy
            </td>
        </tr>
        <tr>
            <td style = "z-index: 20">jam</td>
        </tr>
    </tbody>
</table>

Спасибо @oliver за помощь, но я уже знаю этот метод, но хочу найти его без добавления цикла ни с помощью jquery, ни с помощью JS.

onkar.v 22.01.2019 16:02

@onkar.v Я почти уверен, что это невозможно

OliverRadini 22.01.2019 16:11

да, я много чего перепробовал, но ничего не нашел :(

onkar.v 22.01.2019 16:12

Итак, это дает вам тот же результат, но с jquery, и поэтому я добавил

position:relative

Чтобы z-index работал правильно, каждый элемент, имеющий свойство z-index, также должен иметь любую заданную позицию (например, position:relative).

$(document).ready(function() {
  $("td").each(function() {

    // td Element
    const $this = $(this);

    // your logic condition 
    if ($this.css("z-index") !== "auto") {
      $this.css("color", "red");
    }
  });
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <td>name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style = " position: relative; z-index: 10">jhon</td>
    </tr>
    <tr>
      <td>
        doy
      </td>
    </tr>
    <tr>
      <td style = " position: relative; z-index: 20">jam</td>
    </tr>
  </tbody>
</table>

Другие вопросы по теме