У меня есть таблица в моем коде, которая содержит много строк, и каждая строка содержит несколько 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, без использования какого-либо цикла?
@Terry Терри, но только для тех элементов, у которых установлен встроенный z-индекс, верно?
@OliverRadini Да. Это то, о чем спрашивает ОП, и это похоже на ваш ответ. Если вы хотите получить вычисляемый стиль, использование element.style
также не сработает.
@Terry Терри А, я не могу найти это в вопросе; пример, который они приводят, только указывает их таким образом, но кажется немного ненадежным предположить, что это единственный способ, которым можно установить для них z-index?
Кроме того, нет причин, по которым вы хотите избежать циклов.
Вы можете найти все 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 Я почти уверен, что это невозможно
да, я много чего перепробовал, но ничего не нашел :(
Итак, это дает вам тот же результат, но с jquery, и поэтому я добавил
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>
С технической точки зрения это должно работать:
$('td[style* = "z-index"]')
. В основном вы используете собственный селектор атрибутов.