Response title
This is preview!
Move this topic
Multiple selectors not working
in Using jQuery
•
2 years ago
Trying to do something like this, but nothing ever shows. I have several "Smith"'s (Adam, Bill and Cathy) as test data...
// Hide everything first to start fresh...
$(".user").hide();
// This does not show anything...I expect the TR's that contain "Adam Smith" and "Bill Smith" in the
// TD's whose id's start with "firstName" and "lastName" respectfully to be shown...but alas, nothing:
$(".user").children("TD[id^=lastName]:contains(Smith):TD[id^=firstName]:contains(a)")
.parent()
.show();
Any thoughts?
// Hide everything first to start fresh...
$(".user").hide();
// This does not show anything...I expect the TR's that contain "Adam Smith" and "Bill Smith" in the
// TD's whose id's start with "firstName" and "lastName" respectfully to be shown...but alas, nothing:
$(".user").children("TD[id^=lastName]:contains(Smith):TD[id^=firstName]:contains(a)")
.parent()
.show();
Any thoughts?
1
Replies(8)
Re: Multiple selectors not working
2 years ago
Since I don't see a test page anywhere, I went ahead and tried to re-create a scenario with your giant selector... a few minutes later I was still trying.
Show some HTML and perhaps I can help.
Show some HTML and perhaps I can help.
Re: Multiple selectors not working
2 years ago
the problem is, the selector is extremely dependent on the structure of your html. If your structure is not as we assume, we may not see what is actually wrong with it
http://www.tentonaxe.com
http://www.tentonaxe.com
Leave a comment on kanpan's reply
Re: Multiple selectors not working
2 years ago
working example, instead of each tr having a class of user, i gave the table a class of user. Also, the id's of firstName and lastName have been turned into classes since id's have to be unique. If the table structure isn't quite what you had in mind, it would help if that was posted.
http://www.tentonaxe.com
- $(function(){
- $(".user > tbody").children('tr').hide();
- });
- function showRow(fname,lname) {
- // line by line:
- // get all rows, get children of each row that contain the
- // given first name, get parent of those children, get
- // children of each row that contain given last name,
- // get parent of those children, show those parents
- $(".user > tbody").children("tr")
- .children("td[class=firstName]:contains("+fname+")")
- .parent()
- .children("td[class=lastName]:contains("+lname+")")
- .parent().show();
- };
- <table class="user">
- <tbody>
- <tr>
- <td class="firstName">Adam</td>
- <td class="lastName">Smith</td>
- </tr>
- <tr>
- <td class="firstName">Bill</td>
- <td class="lastName">Smith</td>
- </tr>
- </tbody>
- </table>
http://www.tentonaxe.com
Re: Multiple selectors not working
2 years ago
This looks like a better solution; however, what is wrong with my syntax because I do not know why it isn't working for me? In my given scenario, it is possible that some of the selection criteria will not be entered, in that case, I may want to search on last name only and ignore first name because nothing was entered...
I am trying to make the selector as flexible as possible because I am trying to dynamically build it e.g. use multiple selectors in one string I could help it. This way I can, in ONE string, create an AND search scenario or an OR search scenario or a combination of both. All things being equal, is there any performance benefit to placing multiple selectors in one string as opposed to using dot notation?
I am trying to make the selector as flexible as possible because I am trying to dynamically build it e.g. use multiple selectors in one string I could help it. This way I can, in ONE string, create an AND search scenario or an OR search scenario or a combination of both. All things being equal, is there any performance benefit to placing multiple selectors in one string as opposed to using dot notation?
Leave a comment on Kevin B's reply
Re: Multiple selectors not working
2 years ago
$(".user").children("TD[id^=lastName]:contains(Smith):TD[id^=firstName]:contains(a)")
.parent()
.show();
$(".user").children("TD[id^=lastName]:contains(Smith),TD[id^=firstName]:contains(a)")
You'll need to separate your selectors with a comma. In your sample code, you were delimiting it with a colon. "(Smith):TD" becomes "(Smith),TD"
The other thing you may look into is if the tds you want are direct children of elements with the .user class. You can rewrite the selector as $('.user td[id^=lastName]:contains...'). That way you are still selecting descendants of the .user class, and they don't have to be immediate children.
.parent()
.show();
$(".user").children("TD[id^=lastName]:contains(Smith),TD[id^=firstName]:contains(a)")
You'll need to separate your selectors with a comma. In your sample code, you were delimiting it with a colon. "(Smith):TD" becomes "(Smith),TD"
The other thing you may look into is if the tds you want are direct children of elements with the .user class. You can rewrite the selector as $('.user td[id^=lastName]:contains...'). That way you are still selecting descendants of the .user class, and they don't have to be immediate children.
Re: Multiple selectors not working
2 years ago
I was under the impression that using a comma to delimit my selectors creates an EITHER ONE, OR BOTH scenario, am I correct? I am looking for an AND solution.
I was using this post on StackOverflow as a guide: http://stackoverflow.com/questions/2416803/jquery-contains-selector-to-search-for-multiple-strings/2417076#2417076
I was using this post on StackOverflow as a guide: http://stackoverflow.com/questions/2416803/jquery-contains-selector-to-search-for-multiple-strings/2417076#2417076
Leave a comment on puhnitor's reply
Re: Multiple selectors not working
2 years ago
A comma in a selector is a logical OR
- $(".foo,.bar") // matches anything with .foo or .bar
Simply putting two selectors adjacent to each other is an AND
- $(".foo.bar"); // matches things that are both foo and bar
Leave a comment on ajpiano's reply
Re: Multiple selectors not working
2 years ago
I would suggest using a function like the one i posted, only, having an if statement changing which selector is used based on which of the 2 parameters contain data.
edit: the selectors could of course be modified to match your layout, using the same thought process: select all rows, then filter them based on the criteria(first name last name)
http://www.tentonaxe.com
- function showRow(fname,lname) {
- // select all rows
- var result = $('.user > tbody').children('tr');
- // if first name is defined, filter by first name
- if (fname != null) {
- // select rows with firstName td of fname from result
- result = $(result).children('td[class=firstName]:contains('+fname+')').parent();
- };
- if (lname != null) {
- // select rows with lastName td of lname from result
- result = $(result).children('td[class=lastName]:contains('+lname+')').parent();
- };
- result.show();
- };
edit: the selectors could of course be modified to match your layout, using the same thought process: select all rows, then filter them based on the criteria(first name last name)
http://www.tentonaxe.com
Leave a comment on Kevin B's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to gangelo's question
Statistics
- 8 Replies
- 2441 Views
- 0 Followers
