how do I remove all classes which contain the following style?
HTML
<div class="viewed" style="background:#F9F0D5">
<div class="left">
<span class="title">My </span>
<p>MPA </p>
</div>
<div class="right">
<span>5</span>
</div>
</div>
code sample
document.getElementsByClassName('viewed')[0].style.background:#F9F0D5)[0].remove();
Javascript solution Demo Fiddle :
var viewed = document.querySelectorAll('.viewed[style="background:#F9F0D5"]');
for(i=0;i<viewed.length;i++){
viewed[i].classList.remove('viewed');
}
You have tagged jQuery, so using jQuery selectors,
$('.viewed[style="background:#F9F0D5"]').removeClass('viewed');
To remove the element,
$('.viewed[style="background:#F9F0D5"]').remove();
Hi refere this https://plnkr.co/edit/FxemUZMAmEqo2oXvvMXN?p=preview
$(".viewed[style='background:#F9F0D5']").remove();
this is the syntax
$('div[style*=block]').removeAttr('style');
Have a look attached snippet.
$(".viewed").each(function() {
var finalres=$(this).attr('style');
$(this).removeClass('viewed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="viewed" style="background:#F9F0D5">
<div class="left">
<span class="title">My </span>
<p>MPA</p>
</div>
<div class="right">
<span>5</span>
</div>
</div>
<div class="viewed" style="background:#F9F0D6">
<div class="left">
<span class="title">My </span>
<p>MPA</p>
</div>
<div class="right">
<span>5</span>
</div>
</div>
May be this is what you are looking for?
$("*[style*='backlground:#F9F0D5']").removeClass()
Initial * can be replaced by specific selector.
but if you want to remove all the classes for the element containing the style the use or else for your example 2 options are there
1)
$("div[style*='backlground:#F9F0D5']").removeClass()
2)
$(".viewed[style*='backlground:#F9F0D5']").removeClass()
I hope this helps you
Related
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
I have following html code
<div class="main">
<div id="magicdomid2" class="">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class=""><br></div>
<div id="magicdomid4" class="">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class=""><br></div>
<div id="magicdomid6" class="">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>
Here is the html content
var html = $(".main").html();
I need to get the following htm in a variable
<div class="main">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
<br>
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
<br>
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
I tried following code
var text = $('div.main div').contents().unwrap().siblings('div').remove();
The variable "text" will get an object and i need the html content in a variable.. Please help me to find it.
Is their any possibility to export the customised html or xml format from etherpad ??
May it Help!
var htm = "";
$("div[id^='magicdomid']").each(function(i,val){
htm = htm + $(this).html();
});
$("div[class='main']").empty().html(htm);
//You can also use this for the same
$("div[id^='magicdomid']")
.contents()
.filter(function() {
return this.nodeType === 1;
})
.unwrap()
.end()
.filter(function() {
return this.nodeType === 3;
})
.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="magicdomid2" class="">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class=""><br></div>
<div id="magicdomid4" class="">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class=""><br></div>
<div id="magicdomid6" class="">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>
unwrap and contents might not be the best to use in this case as they tend to modify the actual DOM tree rather than the html variable.
Try this:
// create empty div
var htmlContent = $('<div class="main"></div>');
// loop over magic class & append its content
$('.main .magic').each(function(i, n) {
htmlContent.append($(this).html());
});
// wrap & move one level above to get "main" div in html string
htmlString = htmlContent.wrap('<div></div>').parent().html();
console.log(htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="magicdomid2" class="magic">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class="magic"><br></div>
<div id="magicdomid4" class="magic">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class="magic"><br></div>
<div id="magicdomid6" class="magic">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>
Can I search a div with multiple selectors each with a contains in one jquery string? It needs to be a AND not OR search .
$('.row .people:contains("James") .tags:contains("episode")')
The above selection should return the first div from below.
<div class="row">
<span class="people">James</span>
<span class="tags">episode</span>
</div>
<div class="row">
<span class="people">Bill</span>
<span class="tags">episode</span>
</div>
<div class="row">
<span class="people">James</span>
<span class="tags">podcast</span>
</div>
You can use jQuery's .has() to check if an element contains certain descendants. You can nest :contains within your .has() statement.
That'll allow you to check if .row contains a span with certain text.
Then you can add a second .has() statement to check that it has both spans with the matched text.
Note that in your example HTML, doing the check the way you describe is overcomplicating things because you could just do .row:first-child, but assuming you really do need to check things this way, this is the way to go.
Example:
$('.row').has('.people:contains("James")').has('.tags:contains("episode")').addClass('highlighted');
.row.highlighted {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<span class="people">James</span>
<span class="tags">episode</span>
</div>
<div class="row">
<span class="people">Bill</span>
<span class="tags">episode</span>
</div>
<div class="row">
<span class="people">James</span>
<span class="tags">podcast</span>
</div>
Someone posted an answer that worked, but then deleted it. Using the "~" tilde selector allowed for me to do the selection in one string so I can build the string based off of multiple contains with multiple selectors.
$('.row .people:contains("James") ~ .tags:contains("episode")').parents('.row').addClass('highlighted');
.row.highlighted {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<span class="people">James</span>
<span class="tags">episode</span>
</div>
<div class="row">
<span class="people">Bill</span>
<span class="tags">episode</span>
</div>
<div class="row">
<span class="people">James</span>
<span class="tags">podcast</span>
</div>
You could use the jQuery .has() function however in the example code that you have you are missing a comma between the two selectors.
Should be.....
$('.row .people:contains("James"), .tags:contains("episode")');
I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>
Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.
try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?
Imagine you had html code like this:
<div id="2761421" class="..." data-attributionline="testtext wrote at..." data-created-at="1342689802000" data-updated-at="1342689802000" data-user-id="36847" >
<div class="subject"> <strong>
<a name="2761421" href="#2761421">wee</a></strong>
</div>
<div class="info">
<div class="author"> author:
<span class="name"> testtext (
we)
</span>
</div>
<div class="date"> date:
<time datetime="dfgdf">dfgdfg
</time>
</div>
</div>
<hr style="clear: both;" />
<div class="text gainlayout"> some text
</div>
<div class="foot gainlayout unselectable">
<span class="menuitem postmenuitem-report">
cvbcvb
</span>
</div>
</div>
What would the javascript code look like that searches the whole document for parts where the div with data-attributionline= contains testtext to replace the whole cited div from start to finish with "Filtered"?
or
What would the javascript code look like that searches the whole document for
<span class="name">
where the name contains testtext to replace the whole div starting from
<div id="<someid>" class="..." data-attributionline="testtext<some text>" data-created-at="<somedate>" data-updated-at="<somedate>" data-user-id="<someid>" >
to the last div, ie
</span>
</div>
</div>
with "Filtered"?
There is a whole bunch of attribute selectors (see also CSS), that will match elements with attributes that start with or contain testtext.
In javascript, you can use document.querySelector[All]() or a library function that supports those to get the elements, then remove them.