0

В соседнем топике возник вопрос, решил его, но хочется узнать более оптимальный способ. Есть хтмл, внутри прописаны стили, задача - найти индекс элемента с определенным стилем. Решил задачу ниже двумя способами, но хотел бы узнать, можно ли решить задачу более оптимально?

Можно ли тут применить методы each(), map()? Предложите ваш способ определения индекса элемента.

$(function(){
    var res = $('#res');
    var res2 = $('#res2');
    var i = $('li').filter(function(index) {
        if ($(this).css('font-size') == '17px') {
            return index;
        }
    }).index();
    res.text(i);
    res2.text($('li[style*=17px]').index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
index решение первое: <span id="res">res</span><br>
index решение второе: <span id="res2">res</span><br>
<div>
    <ul>
        <li style="font-size: 14px">14px</li>
        <li style="font-size: 15px">15px</li>
        <li style="font-size: 16px">16px</li>
        <li style="font-size: 17px">17px</li>
        <li style="font-size: 18px">18px</li>
    </ul>
</div>

1 ответ 1

3

Можно. Способ с each лучше, т. к. он перебирает только нужные элементы, т. е. при нахождении останавливает перебор.

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

$("#res").text($("li").map(function (i) {
  return $(this).css('font-size') !== '17px' ? null : i;
})[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

index: <output id="res">res</output>

<ul>
  <li style="font-size: 14px">14px</li>
  <li style="font-size: 15px">15px</li>
  <li style="font-size: 16px">16px</li>
  <li style="font-size: 17px">17px</li>
  <li style="font-size: 18px">18px</li>
</ul>

$("li").each(function (i) {
  if ($(this).css('font-size') === '17px') {
    $("#res").text(i);
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

index: <output id="res">res</output>

<ul>
  <li style="font-size: 14px">14px</li>
  <li style="font-size: 15px">15px</li>
  <li style="font-size: 16px">16px</li>
  <li style="font-size: 17px">17px</li>
  <li style="font-size: 18px">18px</li>
</ul>

3
  • да, спасибо, очень простенько оказалось. 20 фев 2016 в 18:39
  • @Jean-Claude, а принять ответ?
    – Qwertiy
    20 фев 2016 в 20:06
  • @qwerty может еще кто-то добавит) 21 фев 2016 в 6:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.