jquery get HTML of an element stripping the style attribute - javascript

Is it possible to obtain the raw HTML of an element or is it possible to get the HTML without the "style" attribute ? Consider the following example,
<div class="outer">
<div class="inner">
some text
</div>
</div>
Now, I apply some animation/CSS to the "inner" element.
​$('.inner').animate({
'margin': '-10px'
});​​
When I get the HTML of the "outer" element using console.log($('.outer').html());, I get the following
<div class="inner" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
some text
</div>
But, I actually need this only
<div class="inner">
some text
</div>
What is the simplest way to get that output ?? I don't need to create a backup of the element before applying the animate() or css().
Thank you.

If you want to remove the style attribute totally (and don't want it back), use the code below:
/* Working code */
$(".outer").find(".inner").removeAttr('style').end().html();
/* Explanation of working code */
$(".outer") // Get the outer element
.find(".inner") // Find the inner div
.removeAttr('style') // Remove the attribute from the inner div
.end() // Return to the outer div
.html(); // Get outer div's HTML
Here's a working fiddle.
jQuery Docs:
find()
removeAttr()
end()
html()

Related

What comes in between prepend() and append()?

I'll make to quick. I'm trying to position an element wrt my target. Normally we have prepend (before the target) and append (after the target). But is there smth along those lines that helps us place that element ON what we’re targeting, instead of putting it before (prepend) or after(append)?
If you want new HTML Elements add to target... I don't know if this is what you want.
$('.target-x').html('<div class="target-b">new elements</div>')
.target-x {background:#bbb;padding:10px;}
.target-b {background:#fff;color:#222;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="target-top">Elements</div>
<div class="target-x">New Elements Target</div>
<div class="target-bottom">Elements</div>
</body>
You can use position:absolute on a :before to place it ON the actual content.
HTML
<div class="example">This is an example div</div>
CSS
.example {
background-color: #5BC8F7;
}
.example::before {
position:absolute;
content: "Above!";
background-color: #FFBA10;
}

Locate duplicate div ID names on page and append a number using Javascript orr jQuery

I am required to use a specific plugin in Wordpress for a project. It outputs several DIVs, each with identical IDs.
However, I need to isolate them individually, so that I style them in CSS separately.
Normally I would either alter the PHP or use nth-child...but this plugin basically makes both of these options impossible...long (and frustrating) story.
So I am looking for a Javascript/jQuery solution that I can plug into a global .js file and execute using a $(document).ready statement after page load instead.
I just can't seem to figure it out. The js/jquery code would need to alter the html output by this plugin after it's finished loading. It would scan the page, locate each instance of #commonName, and append a number onto it OR add a class name to it. Doesn't matter how it's done, as long as each DIV becomes unique in name.
The plugin outputs something like this on the page (simplified):
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
I would like my Javascript or jQuery code to locate and change every instance of this ID, and turn it into this:
<div id="commonName" class="copy-1"></div>
<div id="commonName" class="copy-2"></div>
<div id="commonName" class="copy-3"></div>
Or this would be fine too:
<div id="commonName-1"></div>
<div id="commonName-2"></div>
<div id="commonName-3"></div>
Thanks for your help everyone!
This will take all of the ids that have the id value of commonName
The using an each loop, we can change the id value using the attr function.
Hope this helps :>
$("[id='commonName']").each((i,el)=>$(el).attr('id','commonName-'+i))
console.log($("body").children())
body div {
width: 50px;
height: 50px;
display: inline-block;
}
#commonName-0{
background: red;
}
#commonName-1{
background: green;
}
#commonName-2{
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';

Jquery effect works on only the first id

I am trying to apply a hide effect on all ID's with the same label, but it only works on the first one. I am having the same problem when I tried to add slideToggle too, but figured solving this will solve the others.
JQUERY
var allPanels = $('#accordionSlide');
allPanels.hide();
CSS
#accordion {
display: block;
width: 100%;
overflow: hidden;
}
#accordionBtn { display: block; }
#accordionSlide { display: block;}
HTML
<div id="accordion">
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
</div>
Use class attribute as id should be unique for every element. id represents only one element that's why it should be unique. So when you apply selector it only selects the first element that it founds on the page.
do like this:
<div class="accordionSlide">
Wireless Remote Monitoring
</div>
and jquery:
var allPanels = $('.accordionSlide');
allPanels.hide();
jQuery matches exactly one element when querying for an ID. An array of at most one Element object will be returned by $("#foo").get(). See the jQuery documentation for more information.
ID Selector (“#id”)-->Selects a single element with the given id attribute.
if you want to apply to all elements then use class in place of id
var allPanels = $('.accordionSlide');
allPanels.hide();
html
<div class="accordionSlide"></div>

Targeting the correct element with jQuery

A tooltip library is copying the dom node to insert the html inside a tooltip.
I need to target the element inside the tooltip, but the javascript is always applied to the original element.
<a class="tooltip">Open</a>
<div class="tooltip-html" style="display:none;">
<div id="main-content" class="scroll">
<div class="Content">
<div class="blue">
</div>
</div>
</div>
I have tried using the enter callback of the tooltip, this was not working. And applying things before the html is copied by the tooltip only cosmetically works, the javascript is still looking at the original. I even tried changing the class before I apply anymore javascript. Figuring if I changed the class the original element would no longer be accessible. The class changed, but the javascript was not applied to what was inside the tooltip.
Is there a good way remove a div once it has been copied, or a better method of finding/targeting the correct element.
$(this).find("div.scroll").test();
EDIT:
...Before...
<div id="main-content" class="scroll">
<div class="Content">
...After...
<div id="tiptip_holder" style="max-width: 230px; margin: 23px 0pt 0pt 999px; display: none;" class="tip_left_bottom">
<div id="tiptip_arrow" style="margin-left: 220px; margin-top: -12px;">
<div id="tiptip_content">
<div id="main-content" class="scroll">
<div class="Content">
....
The this was a part of the enter callback for the tooltip library:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({ content: tip_html, enter: function(){
$(this).find("div.scroll").test();
}
Also tried using,
$("#main-content.scroll", "#tiptip_content").test();
UPDATE:
As people mentioned naming the parent div like I was should of worked, here's an example of how i'm not able to target inside the tooltip.
jsfiddle.net/mstefanko/pUm5V/24
//$("#main-content", "#tooltip-content").css("background", "red");
$("#main-content", "#tiptip_content").css("background", "blue");
Blue doesn't work, red does. I feel like both lines should work.
Found the main cause of my issue. The following lines in the plugin:
function active_tiptip(){
opts.enter.call(this);
tiptip_content.html(org_title);
the enter call was being called before any of the tooltip content was in the DOM, as much as the wrappers for the tooltip existed, calling main-content when it wasn't in the tooltip yet will obviously fail to work. Not sure i've completely solved my issue, but reversing these lines fixes the question at hand.

Categories

Resources