I want to remove anchors with href contains "#tab" without a specific css class "atitleTabs" from some specific divs whose Id contains "tab". I have tried the following code it didn't work for me.
$(window).load(function () {
$('div ul li a').filter(function () {
if (!$('div ul li a').hasClass('atitleTabs')) {
alert('Got Anchor without the particlauar class');
alert($('div ul li a').attr('href'));
} else {
alert('Got Anchor with class');
}
});
});
How can i do it, please help me, how can i achieve my goal.
Try to use attribute contains selector to achieve what you want,
$('div[id*="tab"] a[href*="#tab"]:not(".atitleTabs")').remove();
or just try the samething with .filter()
$('div[id*="tab"] a[href*="#tab"])').filter(':not(".atitleTabs")').remove();
You can use attribute contains selector:
$('[id*="tab"]').find('[href*="#tab"]').remove();
Try
$("[id*=tab]").find("[href*='#tab']").remove();
You can use attribute selector * for this purpose.
If you want to use startwith clause you can use ^.
If you want to use endswith clause, use $
Related
I am using the following piece of code in order to add a class to an li item.
JavaScript
$(document).on('click', '.sidenav .page_item_has_children', function({
$(this).addClass('side_open').siblings.removeClass('side_open')
})
As you can see It refers to the element that is clicked, in this instance an li. I need to apply this to the li's child element which is a ul so that the dropdown can appear. I assume I basically need something along the lines of the following however I can not work it out.
$(document).on('click', '.sidenav .page_item_has_children', function({
$(child).addClass('side_open').siblings.removeClass('side_open')
})
If anyone has any ideas on how this can be done that would be great!
Thanks - Scott
Using jQuery you could try jQuery(this).find('ul') or jQuery(this).children('ul');
See also: How to get the children of the $(this) selector?
Use $(this).find('ul'); to return all ul that are descendants of the li u referenced or $(this).children('ul') to find only 1st-level descendants.
I have a dropdown menu and I want to verify if the submenu hasClass in, then for the closest ul that has class .menu add class in. Here is my code but it adds for all ul that has class .menu instead closest.
<script>
if($(".submenu").hasClass( "in" )) {
$(".submenu").closest(".menu").addClass("in");
}
</script>
You need to change the selector
$(".submenu.in").closest(".menu").addClass("in");
Alternatively :has() selector can also be used as
Selects elements that contain at least one element that matches the specified selector.
$(".menu:has(.submenu.in)").addClass("in");
Try this:
For looking up the DOM use this:
<script>
$('.submenu.in').closest('.menu').addClass("in");
</script>
For looking into the children elements use this:
<script>
$('.submenu.in .menu').first().addClass("in");
</script>
I'm assuming you want to target a child element of .submenu so try this
<script>
if($(".submenu").hasClass( "in" )) {
$(".submenu").children(".menu").addClass("in");
}
</script>
Or if you just want first level children here's a solution: How to select only the first level children in JQuery
I am basically trying to print the value of a button in the div with list class if the button is selected. Also remove the same value wwhen it is deselected. I am able to print the value successfully but not able to remove it. Could somebody please help me out with it.
var buttonSelect = $(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append(this.value + " ")
}
else {
$(".list").remove(this.value)
}
});
You should rather append the content along with html element like span:
$(".btn").click(function() {
if ($(this).hasClass('active')){
$(".list").append('<span class="newval_'+this.value+'">'+this.value + "</span>");
}else{
$(".list").find('.newval_'+this.value).remove();
}});
The parameters from .remove() is a selector, just having a value in there that contains the content of the element you want to remove will not work. For example if I had this:
<li class="list">test</li>
Doing $(".list").remove("test") will not remove it. You will probably want to use the :contains selector (since you may have the value with spaces at the end). So in the example above doing $(".list").remove(":contains('test')") will remove the element. You can do the same thing in your case:
$(".list").remove(":contains('"+this.value+"')");
If you want to remove the element itself along with everything in it, just use jQuery’s remove() method.
$(document).ready(function() {
$("button").click(function() {
$("div").remove(); //remove Div element
});
});
You can see an example here: How to Remove Elements from DOM in jQuery
$(".dist_radio").click(function() {
$(this).attr("class", "dist_radio dist_on");
if (!$(this)) {
$(".dist_on").attr("class", "dist_radio");
}
console.log($(this).attr("class"));
});
I'm using this code to style radio buttons and it sort of works apart from the fact that when I click on another button, the rest don't get dist_on class removed. Can you please tell me what's wrong with it?
Use the .not method:
$(".dist_radio").not(this).attr("class", "dist_radio");
But for your logic, you could just do like below (use addClass/removeClass instead of changing the class attribute directly):
$(".dist_radio").click(function() {
$(".dist_radio").removeClass('dist_on');
$(this).addClass('dist_on');
});
You can use .not():
Remove elements from the set of matched elements.
$(".dist_radio").click(function () {
$(this).attr("class", "dist_radio dist_on");
$(".dist_on").not(this).attr("class", "dist_radio");
console.log($(this).attr("class"));
});
or better using .addClass() and .removeClass() to make your code clearer:
$(".dist_radio").click(function () {
$(".dist_radio").removeClass("dist_on");
$(this).addClass("dist_on");
});
You can use .not() function to exclude the element from the selected set. Passing this to .not() will exclude the current object. You do not need if here to exclude it.
$(".dist_on").not(this).attr("class", "dist_radio");
.not(): Remove elements from the set of matched elements.
Your code would be
$(".dist_radio").click(function() {
$(this).attr("class", "dist_radio dist_on");
$(".dist_on").not(this).attr("class", "dist_radio");
});
I have a series of links with no a classes. I am unable to manually add any classes in the HTML...otherwise I would. I want to use either JavaScript or jQuery to detect a certain link label and add a class to it if the match is found.
Here is the HTML:
<ul class="menu-main-nav">
<li>Duck</li>
<li>Duck</li>
<li>Goose</li>
</ul>
I want to add a class whenever "Goose" appears. Here is what I attempted... and failed.
$(document).ready(function(){
if ($("#menu-main-nav li a").text() == "Goose") { this.addClass("itsagoose")};
});
Use the .filter method:
$("#menu-main-nav li a").filter(function(){
return $(this).text() == "Goose"; //<--- Only include these elements
}).addClass("itsagoose");
Use .html() instead of .text() if you want an exact match, and don't want to allow anything else (eg, don't match <a><span>Goose</span></a>).
Fiddle: http://jsfiddle.net/RWSCY/
Look at the jQuery contains selector. That's what it's for :)
Well, you could use filter:
Demo
$("a").filter(function(){
return $(this).text() == "Goose"
});