How to access sub-elements in current object within JavaScript/jQuery? - javascript

Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.

First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})

Related

Put li attribut on a span

I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));

Element not reacting to JQuery Click

I have added Elements using Jquery inside PHP after loading them from the database. Each button has two classes, one controlling the GUI and another controlling the Click for particular button. The code is as under
echo "<script type='text/javascript'>$('.main').append('<button class=b_ui b$index>Change</button>'); </script>";
Now if I check the classes from Inspect Element perspective of the browser, it shows 2 classes. But when I click on it and get class of element using this code
$('.b_ui').click(function()
{
cls = $(this).attr('class');
alert('no. '+cls);
}
It shows only first class (GUI) and not the other which I want to use for handling click.
Any help ?
Put quotes around the class attribute. <button class=\"b_ui b$index\">Change</button>
You should use "on" method:
$(document).on('click', '.b_ui', function() {
cls = $(this).attr('class');
alert('no. '+cls);
});
When adding elements dynamically to the DOM, they are not accessible by jQuery like an element which was there at page load. say you have this div:
<div id="div"></div>
and you add some content with jQuery so it now looks like this:
<div id="div"><span id="span"></span></div>
you cannot refer directly to the span using jQuery with $('span[id=span]'), you have to target a containing element then filter which contained element you want:
$('#id').on('click','span',function(){});

Traversing with jQuery and matching elements

I am cloning a div (with an h3, a paragraph, and a clickable tag line) on the click of the tag line and appending the div to my sidebar. There is several divs with this same structure and when a div has already been cloned I want to make sure that that div is not cloned a second time. To accomplish this I am trying to match the H3 text of the div whose tag line was clicked with the H3 text of divs that have already been cloned. If there is a match, I pop up an alert message and don't append the cloned div to the side bar.
Here is the code i have:
$(this).click(function(){ // where $(this) is the tag line
var clone = $(this).parents('.full_result').clone(); // on the click of the tag line, find the parent whose class is .full_result and clones it (.full_result is the class of all divs)
var jobsH3 = $(this).parents('.full_result').find('h3').text(); // returns the text of the H3 that is contained in the same div as the clicked tag line
var middleColumnInnerDiv=$('#middle_column').find('.full_result').find('h3').text(); // returns the text of all h3 whose divs have been cloned to the side bar(sidebar id= #middle_column)
//below is where the magic should happen, but i cannot make it work. Tried several selectors and methods. The :contains is but one of them.
$(this).parents('.full_result').find('h3').each(function(){
if('middleColumnInnerDiv:contains(jobsH3)'){ // this line is giving me a headache
alert('You already saved this information');
} else {
clone.appendTo('#middle_column').hide().fadeIn(750);
}
});
};
Any help is much appreciated!
you are missing $ Jquery notation. try this $("middleColumnInnerDiv:contains('.jobsH3')")

check auto generated span class tag with Jquery

i am trying to check an auto generated span class="" content , which i will use it as a condition to determine whether i will show a message to the user or not
here is the span
<span id="sprytextfield1" class="textfieldInvalidFormatState">
what i tried here is to put a Div called email with an id so i can use the following
if ($('email').html('<span id="sprytextfield1" class="textfieldInvalidFormatState">'))
{
alert ("error");
}
but this did not work because if put the span inside my div email this will stop the JavaScript and result in error, because for some data condition i can not close the div at the end of the span.
is there any way to get the span class without putting all the span inside a div ?
Check: http://jsfiddle.net/pratik136/YY5RR/
This will let you get the class of all spans.
If you want to append a span to your div and still get a reference to it (so you can modify it further), I'd suggest doing like this:
$("#email").html(""); // optional: clear email
var mySpan = $('<span id="sprytextfield1" class="textfieldInvalidFormatState"/>').appendTo($('#email'));
Then you can add more things to the span, like text or other elements:
mySpan.text("some text");
mySpan.append('<a>some link</a>');
You mentioned you can't close the div after the span, I understood that you want to add more elements to it, is that correct? Just append (or prepend) them, after creating the span:
$("#email").append(someElement); // Will appear in the end, after the span
$("#email").prepend(someElement); // Will appear in the beginning, before the span
Update: re-reading your question, it's not clear to me what you're trying to check. Will the span be already in your document, and you just want to see whether or not it has a specific class (that you already know)? If that's the case, get the element (you have its id) and use hasClass on it:
if ( $("#sprytextfield1").hasClass("textfieldInvalidFormatState") ) {
alert("error");
}

jQuery wrap() is wrapping every assigned object on click

I have a form that creates a div when you enter a name and click "add". I want to wrap this div in an li but when I do this it wraps every created div with the same class name in an li therefore I end up with multiple levels of li's around the div. Is there a way to only target the div that is created on that click?
The fiddle is here
http://jsfiddle.net/clintongreen/BMX4J/1/
Here's an updated fiddle. All I've done is moved the creation of the new div outside of the call to append, and stored it in a variable so it can be reused. The relevant code from the fiddle:
var newDiv = $('<div class="div_menu_button"></div>');
$('#created_buttons').append(newDiv.val(value).text(value) );
newDiv.wrap("<li></li>");

Categories