Может ли jQuery запустить цикл?

Question

Я использую jQuery, чтобы мои пользователи могли быстро просматривать свои профили.В их профилях есть входящие, и я разрешаю им удалять прошлые сообщения, используя jQuery.Проблема в том, что при каждой загрузке страницы будет разное количество писем.Как я могу сказать jQuery управлять функцией mail1, mail2, mail 3 и т. Д., Но только если они существуют.

Ниже вы увидите jquery, который я запускаю для каждого, но должен быть какой-то цикл.

$(document).ready(function() {
  $("#del1").click(function() {
    $(".mail1").fadeOut();
  });
});

$(document).ready(function() {
  $("#del2").click(function() {
    $(".mail2").fadeOut();
  });
});

Answer 1

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

. Затем используйте их близость, чтобы справиться с ними.Может быть, что-то вроде этого:

$(".deleteButton").click(function(){
   $(this).parent().find(".mail").fadeOut();
});

Это предполагает, что у кнопки и почты общий родительский элемент , но даже если они этого не делают, можно сделать что-то подобное.

Answer 2

Дайте каждой кнопке удаления общий класс и атрибут data-id.Вы можете привязать событие click к каждой кнопке del, а затем удалить соответствующий почтовый элемент.

$(".del").click(function() {
    var id = $(this).attr("data-id");
    $(".mail" + id).fadeOut();
});

Answer 3

Я бы попробовал что-то вроде этого:

$("[id^='del']").each(function(){
 $(this).click(function(){
  $('.mail'+(/\d+/).exec($(this).attr("id"))).fadeOut();
 });
});

Answer 4

Jquery позволяет вам выбирать с помощью «стартов с», вы также можете использовать селектор регулярных выражений в jquery, но я думаю, что это приближает вас:

$(document).ready(function() {
  $('*[id^="del"]').click(function() {
    $(this).closest('[class^="mail"]').fadeOut();
  });
});

Предполагается, что class = "mail ..." является предком в некоторой точке id = "del ..."

Так как мы не знаем ваш точный HTML, я предпочитаю ближайший вместо родителя, так как parent предполагает, что del - это один слой непосредственно внутри почты.

Answer 5

Я думаю, что-то вроде этого должно работать:

$(document).ready(function() {
  $("[id^=del]").each(function(){
    var e=$(this),m = e.attr('id').match(/^del(\d+)$/);
    if( m ){
      e.click(function(){$('#.mail'+m[1]).fadeOut();});
    }
  });
});

Answer 6

1. Привязать событие клика ко всем элементы.

2. Когда они нажаты, получить идентификатор и использовать его, чтобы получить имя соответствующий класс будет скрыт.

3. Используйте это имя класса, чтобы сделать fadeOut()

Answer 7

$(document).ready(function() {
    if($("#del1").length){
      $("#del1").click(function() {
        $(".mail1").fadeOut();
      });
    }
    if($("#del2").length){
      $("#del2").click(function() {
        $(".mail2").fadeOut();
      });
    }
    ....
});