We Keep Coding

JQuery $(this).find("#id").text("text") not changing text

I'm looping through all elements of a certain class on a page and editing the text of an tag in that class with a certain id. I'm referencing the element with $(this).find('#time') and trying to change the text of that object using $(this).find('#time').text("test"), but the the text of the element isn't changing and I can't figure out why.
EDIT:
$('.box').each(function(i, obj){} This is what the loop is, the odd thing is that when i simply reference the text with $(this).find('#time').text() i receive the correct output. But the text won't change when using .text().
Here is the code im using to change the object text:
var time = response.substring(7, 15);
var user = response.substring(16, response.length);
$(this).find('#time').text(time);
$(this).find('#name').text(response.substring(user));
Game Page
<div class="box">
<h1>${{ game_object.amount }}</h1>
<h2 id="time">{{ game_object.start_time}}</h2>
<p id="name">{{ game_object.current_top_user }}</p>
CLICK NOW
</div>

Try to use .html
$(this).find('#time').html("test")
or maybe this can help you:
$('body').find('#time').text('test');
Because the ID of an element must to be unique

Get a href Title and change on click

I have a series of links set in an image gallery and I need a way to display the color to the user. Currently the color name is stored in the a href title of the link to the image in the gallery.
<div class="select-option swatch-wrapper selected" data-attribute="pa_luxcraft-2" data-value="redblack">
<img src="/ay/wp-content/uploads/2017/01/Center-Table-Red-Black-32x32.jpg" alt="thumbnail" class="wp-post-image swatch-photopa_luxcraft-2_ swatch-img" width="32" height="32" data-pin-nopin="true">
</div>
In this case it is Red/Black for the color
Each time an image is clicked it gets assigned the class of "selected"
I know I can get the title with a simple variable of
var title = $(this).attr('title');
But I am unsure of how to get it when the class of selected is applied.

I included a couple of examples to help get you started.
<div class="displayToUser"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("a").click (function () {
$(document).css("background",$(this).attr("title")); //set's background to color, just to let you know how to do that.
$(this).attr("title","new title"); //changes title if that's what you want
$(".displayToUser").html(
$(this).attr("title")
); // sets an element to show the contents of title, just so that you know how to do that
$(this).hasClass("selected"); //if you want to check to see if it has the class selected
$(this).addClass("selected"); //to add the class selected, if that's what you're looking for.
});
</script>

var color;
if ($(this).hasClass('selected')) {
color = $(this).attr('title');
}
and so on...

var valueoftitle = $('.selected')[<your_index>].attr('title');
Edit:
With $('.selected') you get a array back with all the elements with class .selected. Then you can access those elements with the square brackets with the index of the element that you want to access. After that you have the element and you can do with it whatever you want, like in this example: .attr('title'), which would give you back the value of the attribute 'title'. You can use this in any way possible like a for loop, foreach loop or just as inline with an index.

You mentioned that the selected class is applied when the image is clicked. Assuming you have a click handler bound to the image, you could pickup the title attribute from the parent link with $(this).parent('a').attr('title')

How to append unique element of div to another div

I have 2 div like
<div id="destination" runat="server"></div> and <div class="errorDiv"></div>
I write a jquery function
$(document).each(function () {
if ($("#destination").find("div").html() !== $(".errorDiv").html()) {
$("#destination").append($(".errorDiv"));
$("#error").append($("#destination"));
}
}).change();
In this function, if destination div contains errorDiv content skips, else append to destination. Then destination will append to another div. But, my check doesn't work . How can I append only unique elements of div? errorDiv content is produced in ASP page and this content is generic.
While page is running I catch the some error messages and I want to append something about these messages to destination div. for example; if I catch
<div class="errorDiv">A</div>
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">B</div>
<div class="errorDiv">A</div>
<div class="errorDiv">C</div>
contents I want to append only
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">C</div>
divs to destination div.
But with my function, all divs are appended.

So it sounds like you get new .errorDivs and want to add them to #destination only if equivalent text isn't already there.
To do that, you need to loop through the divs in #destination, rather than just looking at the HTML of the first one. See comments:
$(document).each(function() { // <== Calling .each on $(document) makes no sense
// Get an array of the currently-known errors in destination
var errors = $("#destination div").map(function() {
return $(this).html();
}).get();
// Loop through the "new" errors
$(".errorDiv").each(function() {
// Is the text of this error already in the destination?
if ($.inArray($(this).html(), errors) == -1) {
// No, add it
$("#destination").append(this);
$("#error").append($("#destination")); // <== This seems very strange
}
}
}).change(); // <== Triggering the change event on document seems odd

Accessing Div, by class name, with javascript

I can not access this data within the div with javascript.
<div class="questions-text-alignment whiteTextWithShadow question-size-v4">
DATA HERE
</div>
Any suggestions?

Way 1
You can access the data using jQuery in the following way:
<script>
$(document).ready(function(){
var data = $(".questions-text-alignment").html();
alert(data);
})
</script>
Way 2
Without jQuery:
<script>
var data = document.getElementsByClassName("questions-text-alignment");
alert(data[0].innerHTML);
</script>

You can access using document.getElementsByClassName(), But the thing is you will get an array object. Using the array you have to find out yours. In the below sample I have assumed only one class available.
var arr = document.getElementsByClassName("question-size-v4");
alert(arr[0].innerHTML);
DEMO

You can try like this
<script>
function getHtml() {
var html = document.getElementsByClassName("questions-text-alignment")[0];
alert(html.innerHTML);
}
</script>
<div class="questions-text-alignment whiteTextWithShadow question-size-v4">
DATA HERE
</div>
<input type="button" name="click" value="click" onclick="getHtml()" />

You should Use Id to select element in this scenario -
DEMO
<script>
function changeData() {
document.getElementById('contentDiv').innerHTML= "Updated Content";
}
</script>
<body>
<div id="contentDiv">
Content Of My Div
</div> </br>
<input type = "button" onClick = "changeData()"
value = "change div text" />
</body>

#StevenTang I exactly got stuck on the same problem and here is my solution.
document.getElementsByClassName("question-size-4")
works fine on full HTML document load and only if you have a single DIV object identified by this class name.
Otherwise you get HTMLCollection object for preview via ChromeTools to be opened in your web browser.
To identify individual DIV object, including your Class name and Data Here use Firebug and select your Data and open in Firebug with right mouse click (submenu select).
Once your DIV object selected and identified to include your class name and your Data Here is opened in console.log (Chrome tools), clicking on HTMLCollection you get every DIV object identified by index (natural number) as in array.
Selecting the correct index (natural number), you can access your Data Here via
elements = document.getElementsByClassName("question-size-4");
DataHere = elements[correct DIV index].innerHTML or .innerText
You need to manipulate
x = elements.length;
first to know if any such DIV object identified by your class name really exists and has been downloaded.
If x = 0 it means HTMLCollection is empty and elements.innerHTML generates undefined string
If x = 1 there is exactly a single DIV identified by your class name, so
elements.innerHTML should work fine
If x > 1; you have got more DIV objects identified by your class name, so you needd to select the correct one from array data stracture, entering correct index, as above.
It took me months to study the problem and to find the correct answer.
thank you

get attribute with jQuery complication

I was trying to get images alt attribute which is inside another tag but the thing is I have similar images all over the place the only way I can access those is by using this keyword.
jQuery(".content p").mouseenter(function () {
var temp = jQuery(this+' img').attr('alt');
jQuery(this).append("<span>shit men</span>");
});
HTML
<div class="content">
<p><img src="sites/all/themes/nexus/images/image-frame.png " alt="Product1"></p>
<p><img src="sites/all/themes/nexus/images/image-frame.png " alt="Product2"></p>
</div>
By using this I can only access <p> tag but I want to access <img> tag through this keyword and the above code is not working. My question is it possible to concatenate tags to this e.g this+' img' ?

Basically you'll need to get the IMG inside selected element, so just find it.
jQuery(".content p").mouseenter(function () {
var temp = jQuery(this).find('img').attr('alt');
jQuery(this).append("<span>shit men</span>");
});

$('img', this).attr('alt'); // source from adeneo