Выберите и добавьте элемент, но только если определенный тег не существует

Question

У меня есть загрузка jQuery. Когда загружено 1 изображение, оно автоматически становится изображением по умолчанию. Слово «Главный» появляется под этим изображением. Когда вы загружаете второе изображение, я, конечно, хочу, чтобы текст «Сделать основным» отображался под этим вторым изображением. С кодом ниже, он, конечно, будет отображаться под вторым, но также и под первым изображением. Я понимаю, почему, это имеет смысл, но я не хочу, чтобы это произошло. Как мне теперь отфильтровать, если там уже есть тег, оставить его, если нет, добавить новый тег. Может кто-нибудь дать мне подсказку, как решить эту проблему?

  if ($('#default').val() == '')
  {   
    $('a.ui-icon-zoomin').after('<h6 class="default">Main</h6>'); 
  }
  else{
    $('a.ui-icon-zoomin').after('<h6 class="setDefault">Set as Main</h6>');
  }

Answer 1

Я бы на странице добавил класс к текущему выбранному основному изображению. Что у вас с классом по умолчанию. Затем по щелчку текущего «.setDefault» я удалил бы значение по умолчанию, заменил его на «setDefault», а также отредактировал текст. Затем по выбранной в данный момент ссылке измените класс, а также измените текст. Примерно так:

$('.setDefault').click(function(){
    $('.default').removeClass('default').addClass('default').text('Set as Main')
    $(this).removeClass('setDefault').addClass('default').text('Main')
});

Теперь просто включите это в ваш текущий код.

редактирование:

if ($('#default').val() == '')
{   
     $('a.ui-icon-zoomin').first().after('<h6 class="default">Main</h6>'); 
}
else{
    $('a.ui-icon-zoomin').eq(1).after('<h6 class="setDefault">Set as Main</h6>');
}

eq быть здесь правильным. Проблема, которую я вижу с этим, состоит в том, что эквалайзер является жестко установленным значением. Это также относится ко второму пункту здесь. Если вы действительно используете этот код только тогда, когда вы впервые создали альбом и загружаете секунду, это должно быть хорошо. Тогда с оригинальным JavaScript, вступающим во владение. Извините, если это не поможет

Answer 2

Если вы добавляете изображения друг за другом, вы можете сделать это:

  if ($('#default').val() == '')
  {   
    $('a.ui-icon-zoomin').after('<h6 class="default">Main</h6>'); 
  }
  else{
    $('a.ui-icon-zoomin').last().after('<h6 class="setDefault">Set as Main</h6>');
  }

Надеюсь, это поможет: -)

Answer 3

Попробуйте это

  var $a = $('a.ui-icon-zoomin:last');
  if ($('#default').val() == '')
  {   
      if($a.next('h6').length == 0){
         $a.after('<h6 class="default">Main</h6>'); 
      }
  }
  else{
      if($a.next('h6').length == 0){
         $a.after('<h6 class="setDefault">Set as Main</h6>');
      }
  }