Jquery how to select all element but children - javascript

I have a code like that:
<div id="mn">
<span></span>
<span> <span></span></span>
<span></span>
<span> <span></span></span>
<span></span>
</div>
when i use:
$("#mn").each(function(index, element) {
)};
it selects all span tags and span inside span tags, how do i select only parents span tags.

you can do this way:
$("#mn > span").each(function(index, element) {
)};
This will only give immediate child span elements.
JQUERY DOCS

Use the child selector parent > child
$("#mn > span")

Related

How to add a class to a span element which is part of an existing <li> tag with jQuery

How can I add a class to a span element for only these spans which are part of li tags with class='error'
per example, this is the HTML which is generated:
<li class="error">
<!--if list has class error, then add also class error to span which is part of that list tag-->
<span class="error"></span>
</li>
This is the code I have so far:
if(status == 'error') {
data.context.addClass('error'); // adds class error to li tag
}
This is easy using JQuery, just select all li items that have the class .error and then use find() to find all the spam elements inside it, finally add the class .error to those:
$(document).ready(function()
{
$("li.error").find("span").addClass("error");
});
span.error {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="">
<span>Parent "li" do not have class error</span>
</li>
<li class="error">
<span>Parent "li" have class error</span>
</li>
This should achieve the expected result. Iterate through all li elements with the error class and find any spans, then add the class error to it.
$('li.error').each(function() {
$(this).find('span').addClass('error');
})
For a pure vanilla JavaScript solution, you can use an attribute selector to find all your li elements that have a class called error. Once you have that list of li elements, just loop thru (using forEach or a for-loop) and append an a span element as a child of the li. The span element should also be given a class attribute called "error" via setAttribute.
function appendErrorSpan(li) {
var errorEl = document.createElement('span');
errorEl.setAttribute('class', 'error');
errorEl.appendChild(document.createTextNode('Error span added!'));
li.appendChild(errorEl);
};
var errorListItems = document.querySelectorAll('li[class="error"]');
errorListItems.forEach(appendErrorSpan);
<li class="">
<span></span>
</li>
<li class="error">
</li>
Instead of using loops you can do it like this-
let a=document.querySelectorAll("li.error > span");
$(a).addClass('error');
Easiest way-
$("li.error > span").addClass('error');

jQuery - How do you select a parent based on the attribute of a child?

How do you select a parent based on the attribute of a child?
I want to select a div:
that has a child with the radio:checked
<div> <input id="1" type="radio"/> </div>
<div> <input id="2" type="radio"/> </div>
for example.
$('div radio:checked').click(function(){
$(*** div parent based on radio:checked ***).css({'background':'#F00'});
});
closest()
$('div radio:checked').click(function(){
$(this).closest('div').css({'background':'#F00'});
});
if you want the nearest 'parent' div, even if it is several levels up.
parent()
$('div radio:checked').click(function(){
$(this).parent('div').css({'background':'#F00'});
});
if you want the direct parent
Interestingly, you can do a sort of reverse lookup selector with :has like
$('div:has(radio:checked)').click(function(){
$(this).css({'background':'#F00'});
});
try:
$('div radio:checked').click(function(){
$(this).parent().css({'background':'#F00'});
});
UPDATE:
the 'div radio:checked' do not work in your code, you can use:
$('div input[type=radio]').click(function () {
$(this).parent().css({'background': '#F00'});
});

check for child element, hide parent if child exists

I have tried this:
<script>
$(document).ready(function() {
$('#title_article:not(:has(>hr:first-child))').hide();
});
</script>
But never shows..
<div id="title_article">
<span style="padding-left:121px;">Article | </span>
<span class="entry-date"><?php echo get_the_date(); ?></span>
</div>
Seeking to check for child element of <hr> if <hr> exists hide parent or #title_article
<hr> would not be within <div id="title_article"></div> but below:
<!-- page content -->
<div id="title_article></div>
<hr>
<!-- page content -->
You are looking for .next()
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
You have to do something like:
if ($('#title_article').next('hr').length)
$('#title_article').hide();
In your example, <hr> is not a child element of #title_article, but a sibling.
$(document).ready(function() {
if($("#title_article").next("hr").length==0)
$("#title_article").hide()
});
http://fiddle.jshell.net/prollygeek/57gcx6or/3/
Edit:
Use .siblings()
You could use the children function jQuery has to offer.
Try it in this context:
if($('#title_article').children('hr').length > 0) {
$('#title_article').hide();
}
Or this:
if($('#title_article').children('hr').length != 0) {
$('#title_article').hide();
}
You could also use the parent function
Try it in this context:
$('#title_article hr').parent().hide();
This will hide every #title_article that has an hr in it.

jQuery selector only if parent doesn't have attr

Imagine I have this:
<span email="a#test.com" class="parent">
<div class="child"></div>
</span>
<span email="b#test.com" class="parent">
<div class="child"></div>
</span>
How I would I find only the .child elements where the parent span attr email is NOT b#test.com?
Try it:
$('.parent[email!="b#test.com"] .child');
Source.
Regards.
It's simple as this:
$('[email][email!="b#test.com"] > .child')
Explanation:
With this you find all elements with class child which have a parent (>) with email attribute ([email]) and this email attribute is not b#test.com ([email!="b#test.com"]).
Here is the demo
Use this selector:
$(".parent:not([email='b#test.com']) .child")
You can use .each to get each element:
$(".parent:not([email='b#test.com']) .child").each(function(){
var item = $(this); // get the current element
// do something
});
Just use one of those selectors:
.parent:not([email="b#test.com"]) > .child
.parent:not([email=b\#test\.com]) > .child
.parent:not([email="b#test.com"]) > .child {
color: red;
}
<span email="a#test.com" class="parent">
<div class="child">A</div>
</span>
<span email="b#test.com" class="parent">
<div class="child">B</div>
</span>
If you want to get them all with JS, use querySelectorAll:
document.querySelectorAll('.parent:not([email="b#test.com"]) > .child')
$.find("span[email !='b#test.com'] .child");

JQuery - How to insert element after parent element?

I try to find if an element is on the page. If the element is on the page then find its parent element and insert it after that parent element.
JQuery:
if($('.underline .catIcon').length > 0){
$('.underline .catIcon').each(function(){
$(this).insertAfter($(this).parent().find('h2'));
$(this).css('float','left');
});
}
HTML:
<h2 class="underline">
<div class="catIcon" style="padding-right: 10px;"><!-- element to move -->
<img class="catIcon" alt="Projects" src="http://www.example.com/storage/images/category/on-site-support56x56.jpg" style="float: left;">
</div>
Projekty
</h2>
<!-- here before text and after h2 tag with class underline -->.text
<a class="link2 ui-link" target="_blank" href="http://www.example.com/cz/cs/22.html">>> info</a>
The h2 is the parent's parent element, so you need to use .closest('h2'), not .parent().find('h2') - it looks for a h2 element inside the image's parent(div)
jQuery(function(){
$('.underline .catIcon').each(function () {
$(this).insertAfter($(this).closest('h2'));
$(this).css('float', 'left');
});
});
Demo: Fiddle
use closest()
you need to go parent .underline then don't find in this
if($('.underline .catIcon').length > 0){
$('.underline .catIcon').each(function(){
$(this).insertAfter($(this).closest(".underline"));
$(this).css('float','left');
});
}

Categories

Resources