We Keep Coding

Inserting text if .next does not match another element immediately after current element

I want to look for the span element _fieldName and if it is followed by a .mandatory span element then do nothing. But if _fieldName is not followed by .mandatory span element then I want to add a text string immediately after the ._fieldName element. Here is the HTML:
<div class="container">
<span class="_fieldName">Name</span>
<span class="mandatory">*</span>
<span class="_fieldName">Email address</span>
</div>
This code works:
<script>
if($("span._fieldName").next("span.mandatory").length > 0)
{
$("span._fieldName")
}
else {
$( "<p>(Optional)</p>" ).insertAfter( "span._fieldName" );
}
</script>
But it adds (Optional) after every span._fieldName. I only want to add it after the Email address field because it does not have span.mandatory immediately after it. Is this possible?

Use: not !, .next() and .is()
$('._fieldName').each(function() {
if( !$(this).next().is('.mandatory') ) {
$(this).after('<p>(Optional)</p>');
}
});
<div class="container">
<span class="_fieldName">Name</span>
<span class="mandatory">*</span>
<span class="_fieldName">Email address</span>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

The main issue is that you're dealing with all span._fieldName elements at once. You need to loop through them and individually check them to see what their next element is. To do that you can use each(), like this:
$('span._fieldName').each(function() {
if ($(this).next('span.mandatory').length == 0) {
$("<p>(Optional)</p>").insertAfter(this);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<span class="_fieldName">Name</span>
<span class="mandatory">*</span>
<span class="_fieldName">Email address</span>
</div>

How to check if the element is visible

How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..
I tried using this code but it's not working.
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" oninput="total();"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<script>
if ($('.me').is(':visible')) {
mt = m / 100 * 50 + 50;
}
</script>

"none" == document.getElementById("element").style.display //Check for hide
"block" == document.getElementById("element").style.display //Check for show
you can use like also
if ($('#element').css('display') == 'none') {
alert('element is hidden');
}

Checks for display:[none|block], ignores visible:[true|false]
$('#element').is(":visible");

It seems your selector is wrong.
Example of $("[element]").is(":visible") below: (for refrence)
$("#show").on("click", function() {
$("#text").show();
})
$("#hide").on("click", function() {
$("#text").hide();
})
$("#getStatus").on("click", function() {
alert($("#text").is(":visible"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>

$('.me') is a class selector which will return array of elements where elements have class me.
So you need to target the specific div either by using this or by using index as there can be many elements with same class name.
$('.me').is(':visible') this will check the first element and return result according to first element's visibility.
You can try
$(".me").eq(1).is(':visible') //Here 1 is index of div which can vary
OR
$(this).is(':visible')

jQuery trigger excluding with .not()

So I want clicking on the img "tri" to hide the div "popu". But the img is a child of the div popu so i tried .not(). It didn't work. Note: Also I don't want div "textb" to trigger the hide.
HTML
<div id="re" class="column"><div id="s" class="popu"><img class="tri" src="img/whtri.png"/>
<div class="textb"><center style="font-size:14px;">Item Title</center>
<span style="font-size:12px;">Description this is an item that is very good and i like it very much! I like
<span class="highl">More...</span>
</span>
<span style="">
</span>
</div>
</div>
JQuery
$("body").click(function (e) {
if (!$(e.target).closest(".popu").length.not(".tri")) {
$("#s").hide(200)
}
});
Any Help Would Be Awesome!

You can use .parent():
$('img.tri').click(function() {
$(this).parent().hide();
});
or .closest():
$('img.tri').click(function() {
$(this).closest('.popu').hide();
});
Fiddle Demo

You can also use :
$('.tri').click(function(){
$('#s').hide();
});

recognize which span tag triggered javascript function in div

I have a div html element that has a click event set on it inline (not the way I want to do it but legacy code). See here
<div class="myDiv" onclick="triggerJavascript();" id="myDiv">
<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>
What I want to do is recognize which span tag the click event originates from test5, then dont carry out the logic in triggerJavascript function, otherwise complete logic in triggerJavascript.
How can I set this up? I am working with jquery.

You can use event.target in order to access the element. However, in order to get to this element you have to change your onclick attribute a little bit:
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
then you can access event in triggerJavascript:
function triggerJavascript(e){
var element = e.target;
}
See also this answer for a more detailed explanation why event is needed.
Demo ; Demo with text5 check:
<script>function triggerJavascript(e){
if(e.target.id === "text5")
alert("text 5 hit");
e.stopPropagation();
}
</script>
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
<span id="text1">Text 1</span> <!-- closing tags -->
<span id="text2">Text 2</span>
<span id="text3">Text 3</span>
<span id="text4">Text 4</span>
<span id="text5">Text 5</span>
</div>

You can't use onclick="triggerJavascript();", or the event target (the span which was clicked) will not be passed to the event handler.
Since you state you're using jQuery, use this:
$('#myDiv').click(function(evt) {
alert("The target is: " + evt.target.id);
});

HTML
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>
</div>
JavaScript
<script type="text/javascript">
function triggerJavascript(event) {
// event.target will catch the clicked element
if (event.target.id !== 'text5') {
// do something
}
}
</script>
DEMO

If you can't change the HTML, you could try something like this:
var triggerJavascript = (function(){
var clicked;
$("#myDiv span").click(function(e){
clicked = $(e.target).attr("id");
});
return function() {
if (clicked == "text5") {
return;
}
//do something cool...
}
})();
Although I guess, there's no guarantee that the jQuery click handler is executed before the actual triggerJavascript logic, so this might not always work correctly.

getting the id of an element in jquery onlclick?

this is a very simple example of a html page
<span class ="title" id="title_1">this is</span>
<span class="toggle" id="toggle_1>paragraph 1</span>
<span class ="title" id="title_2">this is</span>
<span class="toggle" id="toggle_2">paragraph 2</span>
im trying to do an onlcick event with the toggle functon, so basically when the user clicks title_1 the toggle_1 will hide and show, and if the user clicks title_2 it will show and hide toggle_2, i hope this makes sense.
(document).ready(function() {
$('.toggle').hide();
$('#title_').click(function() {
$('#toggle_').toggle('slow');
});
});
i started my jquery like this, just don't know what to do from here. thanks

You could:
$('.toggle').hide();
$('.title').click(function() {
$(this).next(".toggle").toggle('slow');
});

Try this
(document).ready(function() {
$('.toggle').hide();
$('.title').click(function() {
$(this).closest('.toggle').toggle('slow');
});
});