JQuery заменить строку html

Этот вопрос, возможно, задан раньше, но я не могу получить конкретный вариант, который мне нужно для работы. Используя jquery, мне просто нужно, чтобы выходной файл html автоматически менялся при первой загрузке страницы, без взаимодействия с пользователем.JQuery заменить строку html

Итак, я застрял с этим HTML, что я не могу изменить:

<ul> 
    <li><a href="A" class="fullProfile">View Full Profile</a></li> 
    <li><a href="author" class="extLink">Laboratory Page</a></li> 
</ul>

мне нужно все выше, чтобы изменить только:

<a name="A" class="letter">A</a>

Как вы можете догадаться, Мне нужно в конце концов повторить это 26 раз (поэтому у меня есть привязывающие ссылки для каждой буквы), поэтому что-то облегченное и эффективное, что я могу легко повторить, было бы здорово.

jsfiddle или аналогичный был бы идеальным, показывая, что мне нужно положить в <head> моего документа, так как я определенно не профессионал jquery!

Thanks, Dar.

источник

2013-07-08 user2291964

Настройте jsfiddle, и люди с большей вероятностью помогут вам – reekogi

'$ ('ul'). Html ('new html');' возможно? * Изменить: * Возможно, нужно вызвать родительский язык до: '$ ('ul'). Parent() .html ('new html');'. – qwerty

согласны с reekogi, настройте сценарий в JSFiddle с хорошим примером кода – Jacques

цель все .fullProfile ссылки, получить href, как это кажется, что должно быть имя якоря, и заменить ближайший оберточной UL с новым якорем:

$('.fullProfile').each(function() { 
    var new_anchor = $('<a />', {name : $(this).attr('href'), 
           'class':'letter', 
           text : $(this).attr('href') 
           }); 
    $(this).closest('ul').replaceWith(new_anchor); 
});

источник

2013-07-08 13:04:29 adeneo

@mplungjan - нет, только 'prop()' или 'this.href' делает это, а не 'attr()' или 'getAttribute', поэтому это работает так, как есть. – adeneo

Получил это. Благодарю. Кажется, наши решения очень похожи :) +1 – mplungjan

@mplungjan - великие мысли думают одинаково, я полагаю! – adeneo

Live Demo

$(function() { 
    $(".fullProfile").each(function() { 
     var href= $(this).attr("href"); 
     var link = $('<a name="'+href+'" class="letter">'+href+'</a>'); 
     $(this).closest("ul").replaceWith(link); 
    }); 
});

ОБНОВЛЕНИЕ

Обращение с другим эр ссылки, чтобы указать на новые якорей:

Live Demo

$(function() { 
    $(".fullProfile").each(function() { 
    var href = $(this).attr("href"); 
    var link = $('<a name="'+href+'" class="letter">'+href+'</a>'); 
    $(this).closest("ul").replaceWith(link); 
    }); 
    $(".cwyFellowName a").each(function() { 
    var href = $(this).attr("href"); 
    if (href.length==1) $(this).attr("href","#"+href); 
    }); 
});

UPDATE

Здесь мы обрабатываем остальные ссылки, которые не имеют их собственное письмо

$(function() { 
    $(".fullProfile").each(function() { 
     var href = $(this).attr("href"); 
     var link = $('<a name="'+href+'" class="letter">'+href+'</a>'); 
     $(this).closest("ul").replaceWith(link); 
    }); 
    $(".cwyFellowName a").each(function() { 
     var href = $(this).attr("href"); 
     if (href.length==1) $(this).attr("href","#"+href); 
     else if (href=="link") { 
     var txt = $(this).text(); 
     if (txt.length==1) { 
      $(this).attr("href","#"+txt); 
      var nextDiv = $(this).parent().nextAll(".cwyFellowLinks:first"); 
      nextDiv.find("a").attr("name",txt).text(txt); 
     } 
     }  
    }); 
});

источник

2013-07-08 13:09:37 mplungjan

Вы понимаете, что причина, по которой вам нужно разделить и сращивать, - это то, что вы получаете свойство href, а не атрибут? – adeneo

Я перешел на опору, потому что у меня была такая же проблема с attr, должно быть, что-то пропустило. Спасибо – mplungjan

@mplungjan Спасибо за ваш ответ. Я добавил ваш код непосредственно на свою демо-страницу здесь: http://www.ucd.ie/research/sandbox/conway/fellows/07.html Я просто хочу отметить проблемы в одно мгновение. .. – user2291964

Что-то вроде ...

$("ul a").each(function(){ 
    $(this).html($(this).attr('href')); 

    $(this).attr('class', 'letter'); 
    $(this).attr('name', $(this).attr('href')); 
    $(this).removeAttr('href'); 
});

http://jsfiddle.net/gf4Qh/1/

Вы можете играть с селектором, а значения :)

источник

2013-07-08 13:10:29 Eleazan

Разве это не изменит оба якоря и сохранит неупорядоченный список? – adeneo

_I нужно все вышесказанное изменить на просто ..._ – mplungjan

Да .. извините .. я не хорошо прочитал :( – Eleazan

-1

Что об этом?

http://jsfiddle.net/srU5w/3/

$(document).ready(function(){ 
    $('ul').each(function(){   

    var letter = 'not found'; 

    $(this).find('.fullProfile').each(function(){ 
     letter = $(this).attr('href'); 
    }); 

    $(this).replaceWith('<a name="'+letter+'" class="letter">'+letter+'</a><br/>'); 
});

});

источник

2013-07-08 13:16:46 netblognet

Это будет держать UL – mplungjan

@mplungjan Хорошо, я виноват, только что отредактировал в другой раз. должно быть хорошо. – netblognet

Теперь, скорее всего, ПОЛНОСТЬЮ работает, но с ненужным 'find', так как вы не нацеливаете ссылку на информацию. Однако на его странице есть много других UL, которые также имеют ссылки, которые НЕ являются авторами – mplungjan

JQuery заменить строку html

ответ

Смежные вопросы