jquery - 无法用id或class替换siblings div

Question

我有这个jQuery脚本，我不完全理解。我想知道为什么我不能用类或id取代兄弟姐妹（＆＃39; div＆＃39;）？我认为我的代码不能正常工作。我试图做的是用按钮点击替换一些内容，然后用第二个内容替换第二个内容。

＆＃13;

＆＃13;

<script>
$(document).ready(function () {
  $('.btnClick').on('click', function () {
    var faculty_id = $(this).attr('id');
    $('#' + faculty_id + '_tab').show().siblings('div').hide();
  });
  $('.btnClick2').on('click', function () {
    var department_id = $(this).attr('id');
    $('#' + department_id + '_tab').show().siblings('div').hide();
  });
});
</script>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<div class="row">
            <div class="col-md-3">
                <div class="jumbotron">
                    <h4>Search courses</h4>
                    <hr>
                    <br>
                    <ul>
                        {% for faculty in faculties %}
                            <li class="btnClick" id="fac_{{ faculty.pk }}">{{ faculty.name }}</li>
                            <ul>
                                {% for department in faculty.department_set.all %}
                                    <li class="btnClick2" id="dep_{{ department.pk }}">{{ department.name }}</li>
                                    <ul>
                                        {% for study in studies %}
                                            {% if study.department == department %}
                                                <li>{{ study.name }}</li>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                {% endfor %}
                            </ul>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-md-9">
                <div class="jumbotron">
                    <div>
                        <h3>All courses</h3>
                        <ul>
                            {% for course in courses %}
                                <li>
                                    <a class="first" href={{ course.slug }}>{{ course.name }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% for faculty in faculties %}
                        <div id="fac_{{ faculty.pk }}_tab" style="display:none;">
                            <h3> {{ faculty.name }} courses</h3>
                            <ul>
                                {% for department in faculty.department_set.all %}
                                    {% for study in studies %}
                                        {% if study.department == department %}
                                            {% for course in courses %}
                                                {% if course.study_programme == study %}
                                                    <li>
                                                        <a class="first"
                                                           href={{ course.slug }}>{{ course.name }}</a>
                                                    </li>
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                            </ul>
                        </div>
                    {% endfor %}
                    {% for faculty in faculties %}
                        <ul>
                            {% for department in faculty.department_set.all %}
                                <div id="dep_{{ department.pk }}_tab" style="display:none;">
                                    <h3>Department of {{ department.name }} courses</h3>
                                    <ul>
                                        {% for study in studies %}
                                            {% if study.department == department %}
                                                {% for course in courses %}
                                                    {% if course.study_programme == study %}
                                                        <li>
                                                            <a class="first"
                                                               href={{ course.slug }}>{{ course.name }}</a>
                                                        </li>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endfor %}
                        </ul>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;