tr:not(:first-child) being ignored for some reason
Well, it seem me typing this out helping me to solve it. Correct me if i’m incorrect but it seems :first-child in this case was choosing the
Usually I put the table header row into
and table data rows into a , this clears things up in CSS and jQuery selectors and has its benefits in DOM navigation as well.$(‘table tr:not(:first-child) td:not(:nth-child(-n+3))’) better as $(‘table’).find(‘ tr:not(:first-child)’).find(‘td:not(:nth-child(-n+3))’) due to the right to left selection in sizzle engine.
Just to point out, clickSpot is the same as «event» here, might be better to rename it. Was that actually your intent here?
1 Answer 1
You might consider using thead and tbody since it seems you want to use the tbody here — OR move those «forms» from the table, put it above that, then use $(‘table’).find(‘tbody’).find(‘td:not(:nth-child(-n+3))’) Better might be to simply add classes to either the things you want or those you do not want.
Unbind is deprecated so I used off and on here.
Example, add classes to the table rows you wish to target.
After understanding your question a bit, I simply used the tbody and skipped all td that has an input — which it seems is what you really desire, and makes this work if you change your table to have more checkboxes.
$('table').find('tbody') .on('click','td:not(:has("input"))',function(event)< var clickID = $(this).closest('tr').find('td').eq(3).text(); alert(clickID); >); Header content 1 Header content 2 Header content 3 Header content N Header content N Header content N Header content N Body content 1 Body content 2 Body content 3 Body content N Body content N Body content N Body content N Body content 3 Body content N Body content N Body content N Body content N Body content 2 Body content N Body content N Body content N Body content N
To attach to the table example: might have to change the td to target specific ones. The point is the event handler attaches to the tbody here, adding rows makes no difference, they still get the events. No need to re-execute this on each table row addition as long as the tbody stays in place.
$('table').find('tbody') .on('click','td',function(event)< var clickID = $(this).closest('tr').find('td').eq(3).text(); alert(clickID); >); $('table').find('tbody') .find('tr.useme').find('td') .off('click').on('click',function(event)< var clickID = $(this).closest('tr').find('td').eq(3).text(); alert(clickID); >); Как правильно примнить :not(:first-child) li:before?
Всем привет! не могу разобраться с псевдоелементами, прошу вашей помощи. итак:
Реализованные ПРОЕКТЫ
#project < width: 100%; background: top center url(../images/back_ground3.jpg) no-repeat; background-size: cover; height: auto; h2 < font-size: 45px; font-weight: normal; line-height: 1.3em; color: black; text-align: center; padding-top: 120px; text-transform: uppercase; >.kitchen < border-bottom: 2px solid #888888; padding-bottom: 100px; ul < text-align: justify; line-height: 0; padding: 0; &:after < width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ""; display: inline-block; >li < display: inline-block; text-align: left; padding: 5px 0; img < width: 100%; >> > > menu < text-align: justify; line-height: 0; padding: 0; margin-left: 30px; margin-right: 30px; &:after < width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ""; display: inline-block; >li < display: inline-block; text-align: left; padding: 5px 0; position: relative; a < display: block; font-size: 20px; line-height: 1.3em; color: #0d0d0d; text-transform: uppercase; &:hover < color: #c31e2f; >> > &:not(:first-child) li:before < top: 18px; left: -35px; content: "\\\\"; position: absolute; font-size: 20px; width: 5px; height: 5px; color: #a6a6a6; >> >в итоге получается вот такого вида меню:
и теперь вопрос, как правильно применить &:not(:first-child) li:before что бы в меню перед пунктом «кухни» не было псевдоелемента //.
P.S. и вообще может есть какие то замечания именно по стилям?
Select All `li` that are not first child and not contains something
I want to select all the li’s except the first child and all the li’s that don’t contain: ab 2 so, if my list was:
$("#list").find("li:not(:first-child), li:not(:contains('ab 2'))").each(function () Your question is a bit weird. You say you want to select all the li s except the first and the one containing ‘ab 2’. You say: ‘it wil be. ‘ but that’s the exact opposite.
9 Answers 9
$("#list li") .slice(1) // exclude the first .not(':contains(ab 2)') // exclude all "ab 2" To remove them, just call .remove() or .hide() at the end, no need to loop.
Here is a jsPerf of different solutions posted here: http://jsperf.com/single-selector-vs-filter-perf/2
+1 I like when a jsperf is posted and your slice() idea is clever 😉 Regarding performance, use that then: $(document.getElementById(‘list’)).find(«li») .slice(1) .filter(function()
To remove everything but the first child and any LI with ab 2 , do :
$('#list li:not(:contains(ab 2), :first-child)').hide(); @roasted — Who cares, this has been downvoted twice now, even if it is the correct answer (at least if I read the question and the upvoted answers correctly) ?
The reason why I would not recommand this is because if you use remove you can not get it back, which might confuse someone who only wants to hide them.
@Martijn — that’s nonsense, the issue is the selector, any morron can change remove() to hide(), I just did !
And suddenly the voting totally changed, so that means people are downvoting or removing their votes from answers that work just fine, which most do.
Not sure about the contains functions:
$("#list li:gt(0)").not(":contains('ab 2')").each(function()< // code this.style.display='none'; // try to use native JS where possible >); If hiding is the only thing you want to do, don’t loop, just hide:
$("#list li:gt(0)").not(":contains('ab 2')").hide(); Performancewise you could test if this would be faster:
$("#list").find("li").not(":first-child") // or $("#list li").not(":first-child") // or $("#list li:not(:first-child)") With the filter added to it (didnt do that for readability)
Display none in first child
But on my live web site this script does not work. Here is my problem page http://mociko.zupermarket.uz.ua/index.php/profitroli/profitrol.html The first time, I thought that this is nococflict.js problem but when I set $jq in functions anythings happened. Maybe the problem is in the class/ids architecture, but my knowledge of Java is really pure to fix this problem.
3 Answers 3
You’re selecting IDs but your HTML shows classes with those names, not IDs. Do you mean this?
$('dl .last div .product-tabs-content').not(":first-child").hide(); I saw that you have this in your site:
First of all you need to order that a little bit, you are closing «//]]>» just before to close the bracket, try to put it in this way:
. > new Varien.Tabs('.product-tabs'); > //]]> Then you are using a setTimeout to execute jquery, that does not guarantee you that all the page is loaded, also you are using a 0.1 second to execute that, basically you are not giving to the site time to load, you can change that «100» to «2000» to test if that works. Everyway I think you need to do that in another way than setTimeout because the load times always are variables and you never knows what time is the exactly that the page will be loaded. So you can try this:
Check if
is first child
This the code on jsfiddle http://jsfiddle.net/KGDyR/ I need to add class on (each) p inside (each) div If the p is the first child of div tag, add class .first If not add .notfirst So the output will be like this
p is first
p is not first
4 Answers 4
I’d suggest, for simplicity:
Or, to work in those browsers that don’t support previousElementSibling :
$("div p:first-child").addClass('first') $("div p:not(:first-child)").addClass('notfirst') While I don’t see the point of using two separate selectors for this, why use :not() , when you could use the simpler: $(‘div * + p’) ? Incidentally, while your approach of two separate collections is faster, my amendment improves it slightly (very, very, very slightly. ) 🙂
If you’re only using the first and notfirst classes for styling, you can target these elements purely with CSS, via p:first-child and * + p (ie. a p element that has a previous sibling and is therefore not a first child).
If you’re adding the classes for other reasons (another script?) then you will need Javascript (as per Davis Thomas’s answer, say). However, at the point where you add the classes, you’ve already had to grab those elements with Javascript, so why not do whatever you want to do at that point? In most (possibly not absolutely all, but most) cases it would be unnecessary to use Javascript to add classes that act as Javascript hooks, since you’ve already had to get the elements in question.
In other words, if you’re using the classes for styling, you don’t need Javascript; if you’re using them as Javascript hooks, you probably don’t need those classes.