Duplicate id of children of an element. is it good practise? [duplicate] - javascript

This question already has answers here:
Can multiple different HTML elements have the same ID if they're different elements?
(17 answers)
Closed 8 years ago.
I have so many children, in an element, So to avoid of maintaining multiple ids, I have used same ids
ex
<div id="1" class="userstatus">
<div class="floatl userdetails">
<span id="name" class="ellips">aravi</span>
</div>
<div id="scode" class="status status-1"></div>
</div>
<div id="2" class="userstatus">
<div class="floatl userdetails">
<span id="name" class="ellips">aravi</span>
</div>
<div id="scode" class="status status-1"></div>
</div>
Here I have duplicated name, scode ids for innerElements of 1, 2. I can able to
I can able to get the name by using querySelector api. am I doing right way?

You should never use duplicate ids - id should be unique per document.
If you need multiple elements with the same "tag" use classes.
I would recommend you read: http://css-tricks.com/the-difference-between-id-and-class/
Think of it like:
You have on your ID card an id number that is unique to you, no one else has it.
But you are part of the class of people who post Questions on SO, and obviously there are more of us.

By definition ID's should describe one element in the DOM uniquely. Also, semantics is compromisied by using multiple ID's.

Related

How do I have a function find two elements? [duplicate]

This question already has answers here:
Can you do an 'AND' on a jQuery selector to target multiple buttons?
(3 answers)
Closed 4 months ago.
I'm a beginner with JavaScript so I'm sure this will be an elementary question.
With this function below, I want it to find the two elements and add them to a header element. Right now, the only thing that is working is the element, the link with the rel:author tag. I'm sure this is probably a syntax thing.
(function($) {
$(document).ready(function() {
$(".single .single-post-module").each(function() {
$(this).find('a[rel="author"]', 'span[class="updated"]').clone().appendTo($(this).find('.post-header h1'));
// ^^^
});
});
})(jQuery)
Edit: I'm using Divi on wordpress and the site is in maintenance mode. That's why didn't show the HTML or give a link.
This could be done with pure Javscript querySelectorAll with an CSS selector that will find both elements.
To clone the element, use cloneNode(true) where the first parameter indicates to clone 'deep'
const header = document.querySelector('.post-header > h1');
const elements = document.querySelectorAll('.single, .single-post-module');
Array.from(elements).forEach(e => header.append(e.cloneNode(true)));
<div class='single'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='single-post-module'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='post-header'>
<h1></h1>
</div>

How do i find children of an outer div by it's data-attribute [duplicate]

This question already has answers here:
Selecting element by data attribute with jQuery
(12 answers)
Closed 8 years ago.
Assuming i have a dvMainDiv as shown bellow with multiple children of type divs aswel. Now in my software the children have been added programmatically. Assuming the html is as shown below, how do get a child dive with a specific data-id.
<div id="dvMainDiv" class="dvMainDiv">
<div id="dvChildDiv" class="dvChildDiv" data-id="1">
<p>
some text
<p>
</div>
<div id="dvChildDiv" class="dvChildDiv" data-id="2">
<p>
some text 2
<p>
</div>
</div>
Say for instance, i want to get only the div with data-id of 1 and not 2, how do i do this in jquery.
for your code you would use the following:
$('*[data-id="1"]');
See http://jsfiddle.net/bgqd8xe6/
Edit to use a variable for the data-id use:
$('*[data-id="' + test + '1"]');
Note test must be a string

jQuery - unable to store few html elements in variable [duplicate]

This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 8 years ago.
Hello everyone,
I'm a little bit confused here, trying to store couple of html elements into a variable.
But when I try to print out the content of my variable, some elements are not being displayed. is that some kind of magic :) or what I'm doing wrong exactly?
This is then causing issues in my other functions, which are trying to find certain elements in the variable.
var template = $(" <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div>");
console.log(template.html());
Result:
<span id="item_stats_info"> <div id="item_name"> </div> </span>
Could you guys advise me on what's the best way to store html elements in a variable?
Thansk in advance,
Alex
The .html() method of jQuery returns the HTML inside of the element, since you need to get the outer HTML, you can try wrapping it in another div:
var template = $("<div> <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div> </div>");
console.log(template.html());
Use this to get the full html, not the inner html....
console.log(template.prop('outerHTML'));

use same local storage id multiple times on one page

is it possible to use/print the same local storage element multiple times on the same page?document.getElementById("searchOutput").innerHTML=localStorage.searchTerms;
i tried to collect a search term and output it multiple times on the same page, but it only shows up the first place
<div class="outputText">
<ul><li>You have searched <span id="numberClicks">0</span> times.</li>
<li>You have searched for <span id="searchOutput"> nothing yet</span>.</li></ul>
</div>
<div class="scroogleSearch">
<h2>News results for <span id="searchOutput"> </span></h2>
<h2><span id="searchOutput"></span> on Twitter - #<span id="searchOutput"> </span></h2>
<h2><span id="searchOutput"> </span> - Wikipedia, the free encyclopedia</h2>
</div>
You can only use a given id ONCE per web page.
To output something multiple times, you will either need to generate a unique id or use a class name on these elements. You can have multiple elements with a given class name.
By specification, document.getElementById() only returns one object so you can never use it to retrieve multiple objects.

How to get XPATH of element in a document with multiple elements with the same id?

I fetch data from Google's AdWords website which has multiple elements with the same id.
I would like to get an XPath of a given element.
Could you suggest a jQuery / JavaScript function that can calculate an XPath of a given element assuming that the page may contain multiple elements with the same id?
Please don't tell me that I shouldn't have multiple elements with the same id. It wasn't my idea...
You know you can access the the xpath using //*[#id='blah'][1] and [2] etc. is that the answer you're looking for?
If you know that the element you want will be the nth occurrence of that id then Martin's suggestion will work.
You can also narrow results by searching by multiple attributes and defining an element, say you know that the id is unique for a div element with a specific name or class.
//div[#id='hello' and #name='world']
That may be enough for you but if not then you may be able to find the element you want by searching relatively to other elements.
Given the xml:
<root>
<div id='parent1'>
<div id='element1' />
<div id='element2' />
</div>
<div id='parent2'>
<div id='element1' name='foo' />
<div id='element2' name='bar' />
</div>
</root>
You could get the second element 2 in the following ways:
/root/div[2]/div[2]
//div[#id='parent2']/div[#id='element2']
//div[#id='element2' and name='bar']
//div[#id='element1' and #name='foo']/../div[#id='element2']

Categories