Является ли плохой практикой идентифицировать каждый (используемый) элемент в HTML?

Question

Мне интересно, как лучше всего манипулировать определенными элементами на html-странице с помощью jquery. В настоящее время у меня есть панель со встроенной формой, которая включает в себя поле ввода, флажок, кнопки отправки / сброса / тестирования. Прямо сейчас у каждого из этих элементов есть свой идентификатор, чтобы я мог выполнять соответствующие действия при изменении / выборе каждого элемента. Тем не менее, я чувствую, что мой код становится довольно грязным и нечитаемым, назначая и управляя каждым элементом по id. Я знаю, что для браузеров эффективнее выбирать по идентификатору, но лучше ли просто дать ID панели / форме, а затем вызвать различные селекторы внутри панели / формы? Есть ли какие-либо предложения по выбору некоторых элементов, которым я присвоил идентификаторы ниже? (Те, которые я изменяю.. и т. Д.). Спасибо!

        <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default" id="sample_panel">
                <div class="panel-heading">
                    Heading
                </div>
                <div class="panel-body">
                    <form role="form" id="form1">
                        <div class="form-group">
                            <h4>Subheading</h4>
                            <div class="form-group input-group">
                                <span class="input-group-addon" id="input_addon">some_text</span>
                                <input type="text" id="input1" class="form-control" placeholder="Enter text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <span class="help-block">
                                        <input type="checkbox" id="cb1" >some_text
                                    </span>
                                </label>
                            </div>
                        </div>
                        <button type="submit" class="btn">Submit</button>
                        <button type="reset" class="btn id="reset_btn">Reset</button>
                        <button type="button" class="btn" id="test_btn">Test</button>
                        <i id="some_image"></i>
                    </form>
                </div>
                <div class="panel-footer" id="footer"></div>
            </div>
        </div>
        <!-- /.col-lg-6 -->
    </div>
    <!-- /.row -->

Answer 1

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

Куча на классы, но использовать идентификаторы немного экономнее. Я также боролся с этим, когда писал свое первое приложение MVC. Удачи!

Не забывайте, что на Stackru есть сайт для проверки кода.

Answer 2

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

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