Select an element with suffix id and a class name using Jquery - javascript

I am trying to select an element with a id which has suffix as "_pan1" and it should has class name as oleDiv1 from below code.
<div id="44_div_pan1" class="oleDiv1">
<div id="45_div_pan1" class="oleDiv2">
<div id="47_div_pan1" class="oleDiv1">
<div id="48_div_pan2" class="oleDiv4">
I can get elements using the suffix form ID name using below code
$("*[id$='_pan1']")
but i can not get the combinatined element which has the class oleDiv1
This code is not working $("*[id$='_pan1' .oleDiv1]") .
Please help me to correct the mistakes in my above code.
Thanks

Just combine the selectors without any space between them.
$('[id$=_pan].oleDiv1');

Try this
console.log($("*[id$='_pan1'].oleDiv1"));
Example

You need to use attribute ends with selector:
$('[id$="_pan1"].oleDiv1')

Related

How to select all the HTML elements having a custom attribute?

I know I can select all the HTML elements with a custom attribute by just doing:
$('p[mytag]')
As you can see, I also need to specify the actual HTML div type (a p element in this case). But what if I need to retrieve all the HTML elements irrespective of their type?
Consider this code:
<p>11111111111111</p>
<p mytag="nina">2222222222</p>
<div>33333333333</div>
<div mytag="sara">4444444444</div>
how I can select the 2 html elements (the p and the div) with custom attribute mytag?
You just need to use $("[mytag]")
console.log($("[mytag]"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>11111111111111</p>
<p mytag="nina">2222222222</p>
<div>33333333333</div>
<div mytag="sara">4444444444</div>
Use querySelectorAll (javascript) :
document.querySelectorAll('[mytag]');
Or even simpler with jQuery:
$('[mytag]');

Target a class whether or not it has a number in the name

I'm struggling a bit with this : let's say I have a class in the body <body class="video page"> and in my page I have a pagination which add a number like this <body class="video-2 page"> at each page. I would like to target the class video whether or not it has a number in order to apply some jquery if the condition is filled.
How do I do that?
You can use this attribute selector to select elements that have a class attribute starting with video-:
[class^="video-"]
But for this to work, you’d have to make sure that the video- class is the first one in the element’s class attribute (see http://jsfiddle.net/Czyep/).
It might be better to have the video class and the pagination class be separate, e.g.:
<body class="video page-2 page">
I would split the classes like class="video two page" so that you can still address both classes separately. Nevertheless you can do something like
$('body[class*=video]')
$("body").not(".video");
Should select all bodies wich end with a number. You could also do:
if($("body").is("[class$='video-'")) {}
have you tried something like this this?
$('.video,.video-'+pageNumber).dosomething()
You can use the attribute starts with selector:
$("body[class^='video']");
Assuming I have understood your question correctly I would suggest that you use concatenation in your selector.
I assume that you are aware that you have specified two classes on your body tag namely video and page or video-2 and page. And I therefore assume that page is significant in your selection and should be included in your selector.
Therefore I would use this syntax whilst not as neat as some syntax it is very clear what is going on. Obviously you would need to incorporate this into what ever logic is driving your page selection.
var suffix = "";
$(".video" + suffix + ".page").dosomething(); // select <body class="video page">
suffix = "-2";
$(".video" + suffix + ".page").dosomething(); // select <body class="video-2 page">
Note that there should be no space between the classes in the selector because they have been declared in the same tag in the html.
Had you specified something like
<body class="video"> // body wrapper
<div class="page"> // page wrapper
</div>
</body>
Then a space would be required as you are then looking to match on div page within body with class video or video-2 as appropriate.
suffix = "-2";
$(".video" + suffix + " .page").dosomething(); // select <body class="video-2"><div class="page">

Javascript fade in not working

I'm using a bit of javascript to fade in a couple of message bars at the top of my page - a bit like stackoverflow does :)
I have:
<div id='message' style="display: none;">
<span>Wow, that was quick! - below is a preview of your page.</span>
X
</div>
<div id='message' style="display: none;">
<span>Try posting something interesting</span>
X
</div>
CSS:
#message {height:30px;width:100%;z-index:105;text-align:center;color:white;padding:10px 0px 10px 0px;background-color:#8E1609;}
#message span {text-align: center;width: 95%;float:left;}
.close-notify {white-space: nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}
.close-notify a {color: #fff;}
and Javascript:
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
But unfortunately only the first message displays. How come? Surely the second one should show as well?
thanks
id attributes should be unique among all elements in the page. Change the HTML, CSS and JavaScript to use class="message" instead of id="message" and it will work fine.
Technically what happens here is that jQuery sees the #message selector and tries to find the element using document.getElementById (which is fastest). This function returns only one element, in this case the first one. So the second never has a chance to be processed.
You also have a bug: As the code stands now, hitting the "close" link will make all messages disappear. You need to tweak the click handler a bit to make it behave as expected.
See all of this in action here.
An ID should only be used once on the page. It is a unique identifier.
You'll want to use a class instead if you have multiple items.
Html
<div class="message">Some Message</div>
<div class="message">Some Other Message</div>
jQuery
$('.message').fadeIn('slow');
Here's a demo: http://jsfiddle.net/GBjxH/
Both of your elements have the same ID #message - an ID should be unique, so this should be a class instead.
You can't use an ID for two elements, try using a class!
<div class='message' style="display: none;">
$('.message').fadeIn();
It's because they both have the same id. The fadeIn is only being called for the first one. If you want to do it for both (or all) of them, apply a class and do something like
$(".classname").each(...
You can't have two identical ID's
You shouldn't have elements with the same 'id'.
ID's are unique! You cannot have 2 Elements with the same ID. Use Classes
You shouldn't have multiple items with the same id, use a class instead.

Get value of class of a DIV using JavaScript

Question is simple. Not using jQuery... how do I get the value of class value in a DIV using regular JavaScript?
Thanks.
Assuming this HTML
<div id="Target" class="MyClass" />
Like This
var ElementCssClass = document.getElementById("Target").className;
get a reference to the div and use .className
document.getElementById('someDiv').className

(jQuery) How do I find the first link which has a specific class?

If I have a link somewhere (not predetermined) down the tree like this:
<div id="foo">
<div>
<div>
link
link
link
link
</div>
</div>
</div>
How would I go about selecting the first link with the class "specialLink" using .find()?
My non working guess is:
$("#foo").find(".specialLink a:first")
Just use one combined selector, like this:
$("#foo a.specialLink:first")
Or like your original:
$("#foo").find("a.specialLink:first")
Previously it was looking for the first <a> that was a descendant of a .specialLink, rather than the same element.
Your selector would be:
$("#foo").find("a.specialLink:first");
Better yet, save a few function calls by using:
$("$foo a.specialLink:first");
.specialLink is the a itself. With a (space) :first you will be looking for childeren of .specialLink.
$("#foo").find("a.specialLink:first")

Categories