Вопросы Теги

Адаптивные JQuery-вкладки Bootstrap4 работают некорректно, предоставлен фрагмент

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

Ошибка возникла из-за того, что вы изменяли один и тот же список, проверяя индекс, используя range() .

Таким образом, при увеличении переменной i вы удаляли элемент из списка, который в какой-то момент неизбежно вызывает index error.

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

pattern = ["ABCDE","ABCDEFG","ABCDEFGH","ABCDEFGHIJKLMNO","CEST","DBTSFDE","DBTSFDEO","EOEUDNBNUW","EAEUDNBNUW","FG","FGH"]
output_pattern = []


for i in range(0, (len(pattern)-1)):
    if not pattern[i] in pattern[i+1]:
        output_pattern.append(pattern[i]) 

# Adding the last item
output_pattern.append(pattern[-1])   
print (output_pattern)

>>>> ['ABCDEFGHIJKLMNO', 'CEST', 'DBTSFDEO', 'EOEUDNBNUW', 'EAEUDNBNUW', 'FGH']

Обратите внимание, что этот код будет работать, если ваш список был ранее отсортирован, как вы упомянули в разделе комментариев .

Что делает этот код?

В основном, он использует ту же логику вашего первоначального ответа, где он итерации в списке, и проверяет, содержит ли следующий элемент текущий элемент. Но, используя другой список и итерацию до пункта до последнего , исправит вашу проблему с индексом. Но теперь возникает вопрос:

Что мне делать с последним?

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

output_pattern.append(pattern[-1])

, который добавляет последний элемент исходного списка.

Важное примечание

Этот ответ был написан в ответ на начальный вопрос OP, где он хотел сохранить более длинное перекрытие, и я цитирую на основе следующего элемента в том же списке . Как указано в @Chris_Rands, если ваши проблемы связаны с биологической задачей и необходимо найти какое-либо перекрытие, это решение не подходит для ваших нужд.

Пример, где этот код не смог бы распознать потенциальное перекрытие, 

pattern = ["ACD", "AD", "BACD"]

, где он выдаст тот же результат, не удаляя возможное перекрытие "ACD". Теперь, как пояснение, это будет означать гораздо более сложный алгоритм, и изначально я думал, что это выходит за рамки требований этого вопроса. Если когда-либо это ваш случай, я могу быть совершенно неправ здесь, но я действительно считаю, что реализация на C ++ кажется более подходящей. посмотрите алгоритм CD-Hit, предложенный @Chris_Rands в разделе комментариев.

-1
задан Trilla 18 January 2019 в 18:15
поделиться

2 ответа

Добавьте новый идентификатор для каждого экземпляра. 

#bio

и 

#bio2


@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Poppins:600);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

html,
body {
  background: white;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  color: white;
  font-family: 'Poppins', sans-serif;
}

main {
  min-height: calc(100vh - 200px);
}

p {
  font-family: 'Source Sans Pro';
}

h3 {
  font-family: 'Poppins', sans-serif;
  color: black;
}

.card h1,
h2,
h3,
h4,
h5,
p {
  font-family: 'Poppins', sans-serif;
  color: white;
}

.card {
  background: linear-gradient(to bottom, orange, red);
  width: 18rem;
}

.card a {
  color: white;
}
<head>

  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid padding">
    <div class="row padding">
      <div class="col-lg-12">
        <div class="padding-success">
          <div class="row mt-5 justify-content-center">


            <!-- Card Navbar -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="#profile" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#bio" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#company" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>

              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" id="profile">

                  <div class="card-body padding-success">
                    <h3 class="marker">Jane Jones</h3>
                    <h3 class="marker">43</h3>

                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" id="bio">
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: Hi there</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane" id="company">
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: my dog</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

            <!-- Card Navbar 2 -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="#profile2" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#bio2" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#company2" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>
              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" id="profile2">
                  <div class="card-body padding-success">
                    <h3 class="marker">Bob Jones</h3>
                    <h3 class="marker">43</h3>
                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" id="bio2">
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: Hi</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane" id="company2">
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: cheese</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Bootstrap min.CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>


  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>

0
ответ дан brooksrelyt 18 January 2019 в 18:15
поделиться

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

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

Для каждого цикла вы можете назначить пользовательский атрибут для вашего элемента (data-profile=1), а для herf вы можете использовать href= "[data-profile='1']" и затем увеличить число соответствующим образом

см. Фрагмент кода:

[1110 ] 
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

@import url(https://fonts.googleapis.com/css?family=Poppins:600);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

html,
body {
  background: white;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  color: white;
  font-family: 'Poppins', sans-serif;
}

main {
  min-height: calc(100vh - 200px);
}

p {
  font-family: 'Source Sans Pro';
}

h3 {
  font-family: 'Poppins', sans-serif;
  color: black;
}

.card h1,
h2,
h3,
h4,
h5,
p {
  font-family: 'Poppins', sans-serif;
  color: white;
}

.card {
  background: linear-gradient(to bottom, orange, red);
  width: 18rem;
}

.card a {
  color: white;
}
<head>

  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid padding">
    <div class="row padding">
      <div class="col-lg-12">
        <div class="padding-success">
          <div class="row mt-5 justify-content-center">


            <!-- Card Navbar -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="[data-profile='1']" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-bio='1']" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-company='1']" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>

              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" data-profile='1'>

                  <div class="card-body padding-success">
                    <h3 class="marker">Jane Jones</h3>
                    <h3 class="marker">43</h3>

                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" data-bio='1'>
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: Hi there</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane" data-company='1'>
                  <div class="padding-all">
                    <p class="card-text">Jane Jones: my dog</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

            <!-- Card Navbar 2 -->
            <div class="card card-custom mx-2 mb-3">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" href="[data-profile='2']" data-toggle="tab">Profile</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-bio='2']" data-toggle="tab">Bio</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="[data-company='2']" data-toggle="tab">Company</a>
                  </li>
                </ul>
              </div>
              <!-- Card Navbar content -->
              <div class="card-body tab-content">
                <!-- Home tab -->
                <div class="tab-pane active" data-profile='2'>
                  <div class="card-body padding-success">
                    <h3 class="marker">Bob Jones</h3>
                    <h3 class="marker">43</h3>
                  </div>
                </div>
                <!-- about tab -->
                <div class="tab-pane" data-bio='2'>
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: Hi</p>
                  </div>
                </div>
                <!-- videos tab -->
                <div class="tab-pane"data-company='2'>
                  <div class="padding-all">
                    <p class="card-text">Bob Jones card: cheese</p>
                  </div>
                </div>
                <!-- end of navbar tabs -->
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Bootstrap min.CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>


  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- Bootstrap 4 min.js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>

0
ответ дан Chiller 18 January 2019 в 18:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: