JavaScript-dan HTML taglari va CSS uslublarini sozlash

Mening dasturim quyidagi HTML kodini ishlab chiqaradi. Va men uni juda past darajada topib olgan kodni ko'rish uchun mijozlar tomonidan kodlash (jquery) orqali sozlashingiz kerak. Iltimos, kod server tomonini o'zgartira olmaymiz. Href havolalari va teglar nomlarini saqlab, va CSS sinfini qo'shishda ul va li teglarini olib tashlash kerak. Berilgan shriftning o'lchami: 10px. Men jsda juda ko'p mutaxassis emasman, shuning uchun buni qanday amalga oshirish kerakligini bilib olishim kerak. Quyidagilarni o'z ichiga olgan ba'zi skriptlarni sinab ko'rdim, lekin u butun li ligi va tarkibini butunlay yo'q qiladi.

<script type="text/javascript">
var lis = document.querySelectorAll('.Zend_Tag_Cloud li');
    for(var i=0; li=lis[i]; i++) {
        li.parentNode.removeChild(li);
}
</script> 

Dastur tomonidan yaratilgan original kod:


Oxirgi html kodi quyidagi kabi ko'rinishi kerak:

workout  definition
workout  plans for men
workout  program
workout  routines for beginners
workout  schedule
workouts at home
0

6 javoblar

Bunga nima deysiz?

    var $zendTagCloudLinks = $(".Zend_Tag_Cloud").find("a")
        .addClass("in-the-news-bar__link")
        .removeAttr("style");

    $zendTagCloudLinks.insertAfter(".Zend_Tag_Cloud");
    $(".Zend_Tag_Cloud").remove();
2
qo'shib qo'ydi
Men bunga qo'shilaman. Men shunga o'xshash yondashuvni $ ('. Zend_Tag_Cloud li a') bilan ishlatganman.Attr ('uslubi');
qo'shib qo'ydi muallif aberkow, manba

Shunday qilib, biz oxirida hujjat fragmenti bilan almashtiriladigan ul ga murojaat qilamiz. Ushbu hujjatning fragmenti ul ichida topilgan a ni o'z ichiga oladi. Biz ul qismini jQuery-ning changeWith() yordamida almashtiramiz.

Hujjat bo'lagi biz yangi belgilarni qo'shishga tayyor bo'lmagunimizcha topadigan a ni ushlab turadigan konteyner vazifasini bajaradi. Hujjatning parchalari tezkor va bizning elementlarimizni biriga qo'shib qo'yish, bizga a topilgan barcha uchun bitta DOM kiritishini amalga oshirish imkonini beradi.

end() allows us to "rewind" to the previous collection as once we performed find() we were working with a collection of a and not the original collection contained in $ul.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$( function() {

  var $ul  = $( 'ul' ),
      frag = document.createDocumentFragment();
  
  $ul.find( 'a' )
     .each( function ( i, item ) {
         frag.appendChild( $( item ).addClass( 'in-the-news-bar__link' ).attr( 'style', null )[ 0 ] );
     } )
     .end()
     .replaceWith( frag );

} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div> </div>

0
qo'shib qo'ydi

You can use $.each() to loop through the a tags, add the class, remove the style attribute, and append it to the document before the .Zend_Tag_Cloud list, then remove the list using $.remove()

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('a').each(function() {
  $(this).addClass('in-the-news-bar__link').removeAttr('style').insertBefore('.Zend_Tag_Cloud');
});
$('.Zend_Tag_Cloud').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div> </div>

0
qo'shib qo'ydi

Ro'yxatga bog'langan sahifalar ustida yineleyebilirsiniz - sinfni qo'shing va uslubiy xususiyatni olib tashlang va ro'yxatni o'z ichiga olgan ota-divga qo'yib qo'ying (men uni #parentDiv deb atayman) - "lis t" tuzilishini olib tashlash barcha a-larning ko'rsatilishiga sabab bo'ladi alohida satrlarda emas, balki bitta qatorda ketma-ketlikda - men ularga CSS ko'rsatmalarini kiritishni taqiqlab qo'ydim: blok.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
  $('.Zend_Tag_Cloud li a').each(function(){
    $(this).addClass('in-the-news-bar__link').removeAttr('style');
    $('#parentDiv').prepend($(this).parent().html());
  })
  $('.Zend_Tag_Cloud').remove();
})
a{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentDiv">
</div>
</div> </div>

0
qo'shib qo'ydi
Iltimos, ushbu kodning OP ga nima uchun/qanday yordam berishi haqida ba'zi izohlar qo'shing. Bu kelajakda tomoshabinlar o'rganishi mumkin bo'lgan javobni ta'minlashga yordam beradi. Qo'shimcha ma'lumot olish uchun ushbu meta savol va uning javoblarini ko'ring.
qo'shib qo'ydi muallif Mike McCaughan, manba
Ehtimol, tushuntirish va kodni yozishingiz mumkin va siz ikkalangizga ega bo'lmaguningizcha chop etilmasligingiz mumkin. Bir vaqtning o'zida ham bizni saqlang.
qo'shib qo'ydi muallif Mike McCaughan, manba
@Mike McCaughan - Fikringizni yozganingizdek, men ushbu izohni yozyapman
qo'shib qo'ydi muallif gavgrif, manba

Ushbu kod har li ni sinfga oid narsalar bilan divga o'zgartiradi. Bu jQuery-ni ishlatadi. Bundan tashqari, u butunlay chiqaradi (ishonaman, sizning so'rovingiz bo'yicha).

<div class="restyle">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
newHtml = "";
$("div.restyle ul.Zend_Tag_Cloud li").each(function() {
    $(this).find("a").attr("style","").addClass("in-the-news-bar__link");
    newHtml += "<div class='stuff'>" + $(this).html() + "</div>";
});
$(".restyle").html(newHtml);
</script>
0
qo'shib qo'ydi

Siz quyidagi kabi foydalanishingiz mumkin. Ushbu yechim biroz ko'proq ifodalangan, lekin jQuery-ni talab qilmaydi. Aslida siz ro'yxatni yuqori elementga (.Zend_Tag_Cloud - konteyner) qo'yasiz va JavaScript ulanishlarni topadi va ularni asl qutiga (original uslubni olib tashlash va sinfni qo'shish) konteynerga qo'shadi. Siz foydalanadigan kontekstga qarab, sinf/ID nomlarini eng yaxshi nomlashni ko'rib chiqishni xohlaysiz.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var links = [];
var container = document.querySelector('.Zend_Tag_Cloud--container');
var lis = document.querySelectorAll('.Zend_Tag_Cloud a');

for (var i=0; li=lis[i]; i++) {
  links.push(li);
}

container.innerHTML = '';

links.forEach(function(link) {
  link.style = null;
  link.className += " in-the-news-bar__link";
  container.appendChild(link);
});
<div class="Zend_Tag_Cloud--container">
  
</div>
</div> </div>

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb