Develop Reference

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>

How to select or identify an element that has a class that begins with a specific pattern in the midst of other irrelevant classes?

$('[class*=" col-"], [class^="col-"]').css('text-decoration','underline');
[class*=" col-"], [class^="col-"]
{
background: #39F;
color: #FFF;
border: 10px solid #16A;
height: 50px;
text-align: center;
line-height: 28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="so many classes
col-xs-6">.col-xs-6</div>
<div class="bootstrap spam helper classes
col-xs-6">.col-xs-6</div>
</div>
</div>
So a very similar question has been asked in the past, but I guess my question involves a little more, namely I'm wondering if this is yet another example that using bootstrap on a production site is a bad idea.
In jQuery( or CSS) you can use the [class^="foo-"] to select elements via the beginning of their selector. But sometimes the target class I'm looking for isn't the first class in the array of classes.
For instance in bootstrap you use a number of helper classes to build up your site. And I'd like to test if an element has any one of the numerous col-* classes that bootstrap uses. But the same elements could have any number of other classes applied. So using mySelectedJqueryElement.is('[class^="col-"]') almost always returns false even when the item has a class that starts with col-.
In this answer to this very similar question they first suggest making a class for just that prefix, however for the same reason you select a framework like bootstrap, I'd rather not edit the core bootstrap code. It that answer they then go on to suggest using a starts with and a contains selector... While that might work, I was wondering if there is any way to explicitly look through the array of classes for any class that starts with col- or foo-, if you will. I do realize that I could write a function that extracts the array of classes and runs a regex function to manually check the beginning of each of the classes in the array to see if any of them start with a predetermined pattern. This just seems like something that should exist in javascript or jQuery.
There are a few other questions and answers that are similar, but none of them solve this problem entirely and accurately.
Marked as a duplicate of an included question... And I know it is similar, but I guess I'm asking two questions here which is bad practice. One, I was wondering if there was any better answer to the problem of selecting the elements by checking the prefix of all classes. The current answer is using two selectors to accomplish a single task if this is really the only way then I guess I can live with it however it seems inefficient and non-specific. In theory the wildcard selector with whitespace should never find anything that you don't want it to, but it seems heavy handed. Secondly I assumed that the virtual DOM stored classes in an array, but apparently I was mistaken. I definitely feel that this is a bad practice to store a series of variables as a single string.
My second question is if there is any quick fix to bootstrap that could solve this problem more like what was suggested in the "duplicate" question where they suggest to make "apple-" a new class. Would there be a quick regex replace I could run that would make "col" a class on its own? That sounds like a better solution to this problem, but that would make Bootstrap classes even less "object-oriented" which is why I think I'll be dumping them all together.

Atribute contains string selector:
http://api.jquery.com/attribute-contains-selector/
from the jQuery api:
This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.
The contains word selector (for comparison):
http://api.jquery.com/attribute-contains-word-selector/

From the research I've done and the responses to this question, I've determined that at this point in time there is no clean way to perform this action. So I have resigned to using a hack job that breaks the classes down into an array and performs a check on the start of each class for the string.
$.fn.hasClassStartingWith = function(needle){
var found_match = false;
$(this).each(
function(i){
var classlist = this.className.split(/\s+/);
$.each(classlist,function(){
if(this.startsWith(needle))
{
found_match = true;
}
});
}
);
return found_match;
}
$("*").each(function(){
if($(this).hasClassStartingWith('col-'))
{
$(this).css('background','#39F');
}
});
[class*=" col-"], [class^="col-"]
{
background: red;
color: #FFF;
border: 10px solid #16A;
height: 50px;
text-align: center;
line-height: 28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="so many classes
col-xs-6">.col-xs-6</div>
<div class="bootstrap spam helper classes
col-xs-6">.col-xs-6</div>
</div>
</div>
<p>If the javascript worked then the above column elements have a background of blue instead of red.</p>

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';

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.

mootools: How can i put 10,000 < div > tags in a single page

I have developed an application in mootools. But its going little slow coz of number of tags it contains are almost 10,000. and every tag's structure is like:
<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
in following container
<div id="tags_container" style="overflow: scroll;height: 700px;">
<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
<!-- tag-2 -->
.
.
.
<!-- all tags one after another -->
</div>
i m showing these tags in rows and columns format ( 5 columns and 2000 rows).
The id="tags_container" < div > has vertical scrollbar. but when i try to scroll down in that division to see further tags it scrolls little slow.
what should i do about it?
should i change the implementation method from < div > tags to < table > tag?
what are the options to make it any faster?
In few previous questions, i was advised not to use those many tags in one single document but there is gonna be those many tags so what should i do about it.?

I've done something like this before. Use more CSS classes and fewer elements, and remove everything unnecessary (like comments). Though the data was tabular in nature, I found it much easier to create a pixel-perfect layout using <div>s.
Markup
<div class="cell">
<img src=""> <p>name</p> <p>Gender</p> <p>Mood</p>
</div>
CSS
div.cell {
float: left;
padding: 5px;
margin: 6px;
}
If possible, it may also be quicker to use CSS spriting for the images, rather than 10k more elements for the images. Something like:
Markup
<div class="cell" style="background-position: 0px 0px;">
<p>name</p> <p>Gender</p> <p>Mood</p>
</div>
CSS
div.cell {
float: left;
padding: 5px;
margin: 6px;
background-image: url(path/to/sprite);
background-repeat: no-repeat;
}
Edit If you need to do any sort of DOM manipulation of these elements, I recommend loading all of them up into a JS array — once — and then accessing them by index from the array. Repeatedly querying the DOM for the same elements will wreck performance.
If possible, also remove the <p> elements within each <div>. If you've got 10k <div> elements, each containing 3 <p>s, then you're really working with a minimum of 40k elements.
That's a lot of DOM, baby.
If you can figure out how to get the same layout removing even just 1 or 2 <p>s from each <div>, you're instantly down to 20k or 30k elements.

Why not use a table? It looks like you're trying to build a table with divs.

Sounds like a tabular document to me. Why not use a table?
Note that even with a table you may have some trouble, but I suspect it will be faster.
You should also consider using a class for your styling, rather than doing it manually for each row.

That seems to be the exact reason tables were created in the first place - tabular style data. Any reason you aren't using tables already?

A large amount of tabular data renders fastest if you break it up into separate tbodies, and set table-layout to fixed. Keep all the style info out of the html and in a style element or linked stylesheet.

Is it necessary to show all 10,000 rows on the page at once? Perhaps you could look at implementing the ScrollSpy plugin developed by David Walsh. This will allow you to load a smaller initial record set then access more records when required.