I need to remove 3 classes from a specific <a> that is dynamically built. The only thing that is static is the title. How can I target/find an element by the title? I have googled around but nothing came up that looked like what I was wanting. If this is possible with CSS that would be great but I am expecting a javascript/jQuery answer either work for me.
The tag looks like:
<a href="javascript:%20openLookup%28%27%2F_ui%2Fcommon%2Fdata%2FLookupPage%3Flkfm%3Dj_id0%253Aj_id2%253AtheForm%26lknm%3Dj_id0%253Aj_id2%253AtheForm%253Aj_id77%26lktp%3D%27%20%2B%20getElementByIdCS%28%27j_id0%3Aj_id2%3AtheForm%3Aj_id77_lktp%27%29.value%2C670%2C%271%27%2C%27%26lksrch%3D%27%20%2B%20escapeUTF%28getElementByIdCS%28%27j_id0%3Aj_id2%3AtheForm%3Aj_id77%27%29.value.substring%280%2C%2080%29%29%29" class="col-md-12 col-sm-12 col-xs-12 noPadding" id="j_id0:j_id2:theForm:j_id77_lkwgt" onclick="setLastMousePosition(event)" title="Client Lookup (New Window)">
<img src="/s.gif" alt="Client Lookup (New Window)" class="lookupIcon" onblur="this.className = 'lookupIcon';" onfocus="this.className = 'lookupIconOn';" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" title="Client Lookup (New Window)">
</a>
If you want to select your hyperlink by title with CSS, use such syntax :
a[title='my title']
and the same with jQuery
$("a[title='my title']")
One working jsfiddle : http://jsfiddle.net/hjanto1x/
jQuery is very similar to css selectors. You can target the title like this:
$("a[title=x]")
Let's start from jsFiddle. But I suppose it's should be something like this pseudo code.
$("selector").each("selector").find("attr name").each(function() {
$(this).removeClass();
});
"$(a[title="name"]).event();"
or
"$(a[title="name"]).method();"
Related
So I'm not too familiar with data attributes and I wanted to see if I get can get some help from others.
I have an HTML portion as shown below:
<div class="columns is-multiline app-list"></div>
The app-list is being rendered by the following JS:
Is there a way that instead of calling app-list as a class, that I can do something like this:
<div class="columns is-multiline" data-source="application_launcher"></div>?
All help would be appreciated!
You can use the data-attribute as an selector in the querySelector(selector) method.
In your case just replace
const apps_target = document.querySelector('.app-list');
with the following line.
const apps_target = document.querySelector('[data-source="application_launcher"]');
I am using jQuery sortable function and it works.
I'm also using thymeleaf.
My code looks something like this:
<div id="container">
<div th:each = "drawer : &{drawers}" th:id="${drawer.id}">
<div class="sortableDrawer" th:include="drawer/drawer"></div>
</div>
<div class="mirror"></div>
</div>
Now I'm trying to sort every drawer in that div. I'm doing this and it works:
$('#container').sortable('toArray')
But this gives me an empty Array member which is the id of that tag with the class "mirror". I'm trying to get rid of this. Is it possible to somehow give a class, in this case "sortableDrawer" to the sortable function.
I want to do something like this:
$('#container').sortable(sortableDrawer, 'toArray')
Is there any way to do something like this or am I stuck with cleaning my Array from empty inputs?
Are you searching for something like this?
$('#container').sortable('toArray', { attribute: 'class' });
some body please explain me how to get specific class name in nestloop.
<header class="secreportChartHeader">
<span class = "secreportChartHeaderTitle">
<div id="Global" class ="headerglobal">
<div id="left" >log severity by Datenumber</div>
</div>
</span>
<header>
I would like to change 'log severity by dataenumber' : color,size,font.
var header = $element[0].children[0]; // it contains the above html tags
I am tried like this getting an error blocks are nested too deeply.
var chartHeader = header.getElementsByClassName('header');
for(var i=0; i<chartHeader.length; i++) {
if(chartHeader[i].className === 'secreportChartHeaderTitle') {
chartHeader[i].style.color = 'red';
}
}
AngularJS has a small version of jQuery in it (jq Lite) that you could utilize for grabbing an element with a class name very easily with $('.secreportChartHeader')
See documentation here: https://docs.angularjs.org/api/ng/function/angular.element
From a code perspective, the main problem I see is that you are looking for an element with the class name 'header' which does not exist. If you want to grab the header element, just use the native angular element selector angular.element('header')
Hope that helps! Good Luck!
Sorry jQuery noob question here, I am attempting to make all of the div elements with the class .thumbnail clickable with a callback function. But, once one of the div(s) of that class is clicked I need the specific ID of that given div so I can do further manipulation to that specific one. I am confused if I would use 'this' to reference that specific div once it is clicked or if I am looking at this the wrong way.
Im sure this is a very simple question for you jQuery gurus to answer, its been a long day and my brain is completely zombified.
Example Sudo Code:
<script>
$(document).ready(function() {
$(".thumbnail").click(function() {
//need to get id of thumbnail that was clicked, this is where I am confused
var thumbnail_id = $(this).attr('id')
alert(thumbnail_id);
});
});
</script>
<div class=thumbnail" id="1">Tom</div>
<div class=thumbnail" id="2">Jerry</div>
<div class=thumbnail" id="3">Sue</div>
<div class=thumbnail" id="4">Mary</div>
<div class=thumbnail" id="5">Brian</div>
DOnt you think thumbnail should be written like "thumbnail" and not thumbnail"
It is unclear what your jQuery problem is. To address the question you're asking, when an object is clicked in your code, the click handler will be called and this will be set to the DOM element that was clicked on. This works if there is one object with the thumbnail class or many.
If your problem is really that your HTML is in error, then you should add the missing quote to change this:
<div class=thumbnail" ...
to this:
<div class="thumbnail" ...
FYI, a better way to do this is as follows. This fixes the quote problem and uses a data attribute rather than a numeric id value:
Working demo: http://jsfiddle.net/jfriend00/8tczB/
<script>
$(document).ready(function() {
$(".thumbnail").click(function() {
//need to get id of thumbnail that was clicked, this is where I am confused
var thumbnail_id = $(this).data('id');
alert(thumbnail_id);
});
});
</script>
<div class="thumbnail" data-id="1">Tom</div>
<div class="thumbnail" data-id="2">Jerry</div>
<div class="thumbnail" data-id="3">Sue</div>
<div class="thumbnail" data-id="4">Mary</div>
<div class="thumbnail" data-id="5">Brian</div>
As far as I know, I'm following the correct usage form on: http://api.jquery.com/multiple-attribute-selector/, but for whatever reason I'm not seeing, my code is not working. Each attribute works fine independently of one another (i.e.
$(".tonight_stat_peopleThumbs li[srcid="+srcid+"]") works and $(".tonight_stat_peopleThumbs li[style*=inline-block]") works) but they do not work together.
Here is my function in the JavaScript:
hidePatrons = function(srcid) {
$(".tonight_stat_peopleThumbs li[srcid="+srcid+"][style*=inline-block]").each(function(){
$(this).css({"display" : "none"});
});
}
Here is a piece from the HTML:
<ul activepage="1" class="tonight_stat_peopleThumbs" style="width:171px">
<li id="myid" class="myclass" ptype="people" ptime="11101101" style="display:inline-block;">
<a href="http://domain.com/users/#.php">
<img src="https://graph.facebook.com/#/picture" />
</a>
</li>
</ul>
NOTE: The '#' are inserted for privacy, assume they are fbid numbers.
Note that while CSS allows attribute selectors without quotes, there are quotes in every jQuery example. My experience has been that jQuery does not select reliably without quotes.
/* Good for CSS, bad for jQuery */
[foo=bar]
/* Good for both */
[foo="bar"]
Try
$('.tonight_stat_peopleThumbs li[srcid="' + srcid + '"][style*="inline-block"]')
mind the quoting!
try changing li[srcid="+srcid+"] to li[id="+srcid+"] I don't see a "srcid" attribute so I assume you are looking to search on the "id" attribute
can you please try like this way? the following is working fine for me for your HTML code.
hidePatrons = function(srcid) {
$("#tonight_stat_peopleThumbs li[ptype=people][style*=inline-block]").each(function(){
$(this).css({"display" : "none"});
});
}
note: # is for id, and . is for class. I changed . to # and srcid="+srcid+" to ptype=people from your code.