Replace div html with this attribute - javascript

I have html code
<div content="Something 1">Content 1</div>
<div content="Something 2">Content 2</div>
<div content="Something 3">Content 3</div>
I want to use jQuery to replace content of HTML with this content attribute.
<div content="Something 1">Something 1</div>
<div content="Something 2">Something 2</div>
<div content="Something 3">Something 3</div>
I don't know how to select multi object.
Any one help me please.
Thanks.

ID's cannot contain spaces.
This will replace all instances of Content x with Something x, getting x from the id.
$("div").each(function(){
$(this).text($(this).attr("id"));
});
Example 1: http://jsfiddle.net/charlescarver/xuGEq/2/
This will replace all instances of Content x with Something 1:
$("div").each(function(){
$(this).text("Something 1");
});
Example 2: http://jsfiddle.net/charlescarver/xuGEq/1/

If all of your id's will start with the prefix something, use:
$("div[id^='Something']").text("Something 1")
If what you are looking for is to edit all the div tags in your document, you could simply:
$("div").text("Something 1")
If you know exactly what html tags are those that you want to edit, I recommend you to mark them with a class. Lets say:
<div id="Something 1" class="editable">Content 1</div>
<div id="Something 2" class="editable">Content 2</div>
<div id="Something 3" class="editable">Content 3</div>
This way you could simply do:
$(".editable").text("Something 1")
In case you want to modify their inner text. or:
$(".editable").html("<strong>Something 1</strong>")
In case you want to give them a richer format modifying not only their text but also their inner HTML.
It is a bad practice to use ids with spaces. Chrome won't complain about it, but
some other browser will. So only in case you are using ids like "Something 1", it would be better to use "something_1" (It is a convention to use lowercase for attributes and html tags).
Here you have a link that explain how selectors work in jQuery:
http://api.jquery.com/

Try this if you dont want to affect all the divs on the page, but only the one containing something in their id...
$("[id^=Something]").each(function(){
$(this).text("Something 1");
});
Note that using spaces inside a id is not the way to go, you should name them somthing like "something1" ....

Related

How do I toggle one element without the others with jQuery?

I was wonder how I can toggle one element without toggling others... I just don't want to do this every time:
HTML:
<div class="share-toggle as-1"></div>
<div class="audio-share as1">
<p>Some Text</p>
</div>
<div class="share-toggle as-2"></div>
<div class="audio-share as2">
<p>Some Text</p>
</div>
JS:
$('.as-1').click(function() {
$('.as1').slideToggle('fast');
});
$('.as-2').click(function() {
$('.as2').slideToggle('fast');
});
Is there a way to write this in short? pls help... thx
You can use jQuery to select all elements, which className contains a certain substring:
$('*[class*="as-"]')
This will select all Elements in the DOM (*), of which the className ([class=""]) has "as-" anywhere (*) in it.
And then you can use the Element passed as this to get the number of the element after the "as-" and toggle the wanted element:
$('*[class*="as-"]').click(function () {
let elemNum = this.className.match(/as-(\d+)/)[1];
$("as"+elemNum).slideToggle('fast');
});
I know you already accepted an answer, but anyway…
Here is, in my opinion, a better solution.
Why is that?
Only 3 lines of code, and not using any regex or partial class names…
See comments in my code for more details:
// You could use class^=[as-] to filter on the classes that start with as-,
// (the ^ would be better than a *, because more specific)
// But I suggest you to use the 'share-toggle' class, there's no need to complicate things here:
$('.share-toggle').on('click', function(){
// The following will get the .audio-share element that is after the element we just clicked,
// If your HTML structure is gonna stay well structured like this, it's the finest solution:
$(this).next('.audio-share').slideToggle('fast');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share-toggle as-1">[ CLICK HERE ]</div>
<div class="audio-share as1">
<p>Some Text</p>
</div>
<div class="share-toggle as-2">[ CLICK HERE ]</div>
<div class="audio-share as2">
<p>Some Text</p>
</div>
I hope you will consider this answer.
And I hope it will help!

jquery custom data attribute not working inside div tag

I am using this div code
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
and trying to print the values like
japp.init = function () {
console.log($("div").data("role"));
console.log($("div").data("lastValue"));
console.log($("div").data("hidden"));
console.log($("div").data("options").name);
});
This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
console prints undefined for above html.
Please let me know if anything is not clear
When getting data jQuery returns data from the first element matching selector, if the first div in DOM has no data - jquery won't return it.
try
japp.init = function () {
console.log($("div[data-role]").data("role"));
console.log($("div[data-lastValue]").data("lastValue"));
console.log($("div[data-hidden]").data("hidden"));
console.log($("div[data-options]").data("options").name);
});
or better give this div an id, and select by id like $('#someid').data('role')
Your selector is div and when you have more divs on your page jQuery will select (in this case) the first one.
<div class="page">
<div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
In the above HTML the first div does not have data-* so it will result with an undefined value
You have to be more specific with your selectors
$('.page div').data('role')
Or
$('div:first div').data('role')
Try
$("div.page div").each(function(){
console.log($(this).data("whatever_you_need"));
});
etc.
This way you will cycle through all divs nested in div with class 'page'.
You aren't exactly specifying which div to get. Whenever you are trying to get specific data from a specific element, you should be sure which div you are accessing. This can either occur within an iteration of elements or by ID or an element in relation to an ID. It shouldn't be done based on tagname or even classname as they can be multiple. In this case, why not add an ID on the div you are trying to get so you can access it specifically:
<div class="page">
<div id="thisDiv" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
Then access:
console.log($("#thisDiv").data("role"));
Also, it is bad for performance to wrap the same jquery object over and over, you can cache it like this:
$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....
I believe it is because $("div") returns all occurrences of div and then selects the first to perform a function on. I'm not sure how you want to use this functionality but it might be worth considering something like this
JSFiddle where a class is used to select the correct div
$(function(){
console.log($(".div").data("role"));
console.log($(".div").data("lastValue"));
console.log($(".div").data("hidden"));
console.log($(".div").data("options").name);
});
give your Div a class like class="myClass"
<div class="page">
<div class="myClass" data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
</div>
and then you can change your jquery selector:
japp.init = function () {
console.log($(".myClass").data("role"));
console.log($(".myClass").data("lastValue"));
console.log($(".myClass").data("hidden"));
console.log($(".myClass").data("options").name);
});
otherwise jquery don't know which div you are looking for.
I hope this will help

I need the jquery to reach this nested div

I can't figure out how to reach a nested div from the outer most element. Here is the html:
<li id="slide1">
<div id="video-container">
<div id=video-holder><div id="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
I need jquery that will reach the id thumbnail from the starting id of the slide1
Use find to get the descendant.
$("#slide1").find("#thumbnail")
Basically since it is id you can just do: as id is supposed to be unique no matter where it appears.
$("#thumbnail");
For your scenario you want to use startswith selector to select the dynamic id starts with video_fake and in the 5th
slide.
$('#slide5fake').find('[id^=video_fake]').attr('id', 'newId')
$("#slide1").find("#thumbnail")
try this
<li id="slide1">
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
<script type="text/javascript">
$('#slide1').find('.thumbnail').each(function(){ });//you can get here two thumbnail
</script>
$("#thumbnail")
will find the thumbnail directly, but I suspect the id for your thumbnail will be repeated down the page, so you really need to be searchind for a class.
$("#slide1.thumbnail")
will do that if you change this line
<div id=video-holder><div id="thumbnail"></div></div>
to this
<div id=video-holder><div class="thumbnail"></div></div>
In case there are more "thumbnails" on your page, it would be better to give it a class. Ids should be unique.
In your given case, it would be sufficient to get it by ID
document.getElementById("#thumbnail")
If you gave it a class
document.querySelector("#slide1 .thumbnail")
would get you the element.
In jQuery the equivalent would be:
$("#slide1").find(".thumbnail");
There are many ways you can do this...
Single selector:
$('#slide1 #thumbnail');
If you already have the slide element:
var slide = document.getElementById("slide1");
// and then:
$('#thumbnail', slide);
Doing a .find() on the #slide1 element
$("slide1").find("#thumbnail");
But since you're using an ID it doesn't make sense to do anything else but finding that single ID, since you shouldn't have more than one element on a page with the same ID
$("#thumbnail");
There are probably more ways.. and what the best method is depends a lot on what you're doing and what the context is...
Good luck

changing div's using jquery problem?

i have this click function note when clicked it should change a couple of css values using jquery, here goes:
$('a.note').click(function(){
$('#leftpanel').css('border-left-width', '20px');
$('#commentbox').css('visibility', 'hidden');
$('.date').css('visibility', 'visible');
});
html:
<div id="leftpanel>blahbalhbalh number 1</div>
<div id="leftpanel>blahbalhbalh number 2</div>
but the jquery only chnages the css of the first leftpanel div, and not the second one, how can i resolve this or is thier a problem, thanks!!!!
The id should be unique per element per page, that's your problem, you should do:
<div id="leftpanel">blahbalhbalh number 1</div>
<div id="leftpanel2">blahbalhbalh number 2</div>
Or you can use same class instead if you want:
<div class="leftpanel">blahbalhbalh number 1</div>
<div class="leftpanel">blahbalhbalh number 2</div>
And then you can use jQuery to target via class as well.

How do I move an HTML element in jQuery?

My HTML structure is like this:
<div id="parent">
<div id="1">Some content</div>
<div id="2">Some content</div>
</div>
I want to move the element id="2" to place before id="1" so its will be like this:
<div id="parent">
<div id="2">Some content</div>
<div id="1">Some content</div>
</div>
How do I do something like that in jQuery?
You can use .insertBefore(), like this:
$("#2").insertBefore("#1");
Or, .prependTo(), like this:
$("#2").prependTo("#parent");
...or the reverse using #1 and .insertAfter() and .appendTo()...or several other ways actually, it just depends what you're actually after, the above 2 methods should be about the shortest possible though, given 2 IDs.
I'm assuming this is just an example, remember to use IDs that don't start with a number in an actual HTML4 page, they're invalid and cause several issues.
Simply do:
$('#1').before($('#2'));
Ever thought about using jQuery UI Sortable ?

Categories