How to replace all id from href? - javascript

I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?

You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.

You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()

Related

How add ID to HTML href with javascript

I have an HTML like this
<div class="this">
EXP
</div>
I want to add id to <a>. But do not know what to do.
First select your element using something like .getElementsByClassName(). Keep in mind that .getElementsByClassName() returns a NodeList collection of elements, so you'll want to access the first index (or loop over them). You can then simply set the ID with .id, as the ID is merely a property of an element.
This can be seen in the following:
const element = document.getElementsByClassName('this')[0];
element.id = 'element';
console.log(element);
<div class="this">
EXP
</div>
If you want to add this with Javascript, you'll need to use a selector to target your <a> tag and then set the id attribute on it. You can do this by using the querySelector() function or as seen below:
// Find an <a> tag that occurs below a class called "this" and set its id attribute
document.querySelector('.this > a').id = "some-id";
There are many other available functions to handle this through native Javascript and other frameworks, so your milage may vary depending on what you are using.
Example
In this example, we have provided some CSS that should only apply to an element with an id of "test" and we'll run the necessary code to show that the id is being added to the element (as it will be red):
document.querySelector('.this > a').id = 'test';
#test { color: red; }
<div class="this">
EXP
</div>
Add the id attribute to the <a> tag. See the differences of the middle line:
<div class="this">
<a id="expid" href="exp.com">EXP</a>
</div>

How to get all elements with inline-style (style-attribute) start from a id of a div?

I want to get all elements which have an inline-style and searching for it inside a div and all their children.
Example
<div id="idofstartdiv">
<span style="color:red;"></span>
<div>
<div style="color:green"><span style="color:yellow;"></span><span></span></div>
</div>
</div>
I know I can get all the inline style by $("[style]") and I know to select the starting div by $("#idofstartdiv").
How can I combine both selectors?
You can combine them by simply doing:
$("#idofstartdiv[style]")
This will get the element which has an id of idofstartdiv along with a style attribute. For getting all children of that id as the parent with a style attribute you can do:
$("#idofstartdiv").find("[style]")
As mentioned in other answers, you can also do:
$("#idofstartdiv [style]")
$("#idofstartdiv [style]") is this is what you are asking for? if not can you provide an example of what you are expecting, am not clear with your question.
Another alternative-
$("[style]", "#idofstartdiv")
This will also return all the elements which have style attribute under the parent div-id "idofstartdiv".

What is the best practice to get a child of an element in HTML?

Something like get an variable out of class.
ParentElement.someId.someId..
If i have something like that in css:
#someId #aaa #bbb
{
...
}
#someOtherId #aaa #bbb
{
...
}
and i want to get only the element under "#someId".
Something like
getElementById("someId aaa bbb");
would be great, unfortunately this one doesn't work.
Any ideas?
If you have given an id to the element, you can say
document.getElementById(childId)
Id must be unique in the document.
In your scenario, what I think you are having element with same Id at multiple places. Either you can user class instead of id.
I assume you want to get the element in javascript, or what do you mean by "getting" in HTML?
<div id="box">
<div>Child element</div>
<div>Child element</div>
</div>
You can access a specific element by getElementById('box'); and you can access its children by getElementById('box').children. So the first child would be getElementById('box').children[0] for example.
Did that help you ?
Id's are unique within the document so your ParentElement.someId.someId can simply be translated to document.getElementById(childId).
Regarding the sample CSS you posted, please note that you cannot have both situations in the same HTML at the same time, you can stylise differently based on the DOM hierarchy though. With this in mind, you can use the same document.getElementById(childId) call.
ID should be unique, so you really shouldn't have elements with the same ID over and over, instead you can use class.
To access the element though, first you get the parent:
var parent = document.getElementById("someId");
Then use querySelector on parent to get the desired element:
var element = parent.querySelector('.ELEMENT_CLASS');
And if it's id then:
var element = parent.querySelector('#ELEMENT_ID');

Replace all divs with value

I have the following code:
$('#select_albums').load(document.location.href + "&action=get_albums");
But this is only replacing only the first found div with the id #select_albums from DOM. How do I replace all divs with an id?
Every item in the DOM has a unique id. If you want to act on many divs at the same time use a class $(".myclass") or a tag $("div") selector.
Yes because by definition an element ID can only appear once on a page. If you have more elements use a class instead.
$('.select_albums').load(document.location.href + "&action=get_albums");
With
<div class="select_albums"></div>
<div class="select_albums"></div>
id's must be unique, try using a class instead such as $(".albums").load...
ids must be unique

How to gain access to an element on the same level in the DOM?

<div id="dad">
<img id="mum">
<input>
</div>
With jQuery, how could i get access to the input element, get is value or set it for example? I can't work out how to access something on the same level.. and i dont want to be using ID's, just parent/child nodes so i can use the code for loads of dad div's
Thanks!
an addition to Zed,
$(this).parent().children('input');
if you give a name to your input field then you can easily select throughout the others,
$(this).parent().children('input[name=my_input]');
then you can give any value as:
$(this).parent().children('input[name=my_input]').val('any value');
Sinan.
var myEl = $("#dad").children(":input");
$(this).parent().children() ?
Try this, to find the first child input element:
jQuery("div").find("input:first")
If i understand question, you would like achieve input from mum leve?
So try $("#mum ~ input")...
BTW, great site to search jquery function by category http://visualjquery.com/ +nice example.
I guess you want to find siblings (node with same depth and same parent and in DOM tree)
$(el).next() - next element (sibling) for all elements in the set
$(el).nextAll - all following siblings
$(el).nextUntil - all following siblings, stop on some condition (not including first "bad match").
Besides, you have next adjacent selector (+) and next sibling selector.
The same about prev, prevAll and prevUntil.
And you even have a siblings method.
Check this out.

Categories