CODEWITHSUNDEEP
jqueryhtml
Moritz
Moritz

Reputation: 766

Select element except for specific child

My problem is:

I select a div with many children and would like to know how to not select a certain element which is actually a child of that previously selected element.

I already tried the :not(selectedElement) selector and the .not(selectedElement) selector or api (dont know how it's called). Anyway, I also found someone who asked a similar question which didn't help so I guess the only way to find out what is wrong is to ask here if you have any approaches (I know stackoverflow is not meant to work like that but I seriously sat there many times and couldnt solve it):

HTML:

<div class="tablee" style="cursor:/*pointer*/;">
    <table>
        <tbody>
            <tr>
                <td>
                    <a href="something.php">
                        <img src="1.jpg">
                    </a>
                </td>
                <td class="postcontent">
                    <p class="postusername">
                        <a class="poster" href="something.php">momo</a>
                        <br>
                        some other text
                    </p>
                </td>
                <td>
                    <imgsrc="1.jpg">
                </td>
            </tr>
        </tbody>
    </table>
</div>

jQuery:

//non-dynamyic
$(".tablee").not($(this).find('a')).click(function() {
    $(this).next().slideToggle();
});

So if tablee is clicked and not a link within it (within tablee element) the next element that comes after tablee shall toggle.

Upvotes: 4

Views: 3360

Answers (5)

BenG
BenG

Reputation: 15164

First of all, your selector is not selecting all the children and attaching the click event to then. The event is only on the actual selector and on click of a child the event is propagating up to the parent.

You have a click event on .tablee which you do not want to trigger on the click of any a within. In this case have a separate event on a with stopPropagation:-

$(".tablee").click(function() {
    $(this).next().slideToggle();
});

$(".tablee a").click(function(e) {
    e.stopPropagation();
});

This will then stop any click on a bubbling up to .tablee.

Upvotes: 5

Tim Grant
Tim Grant

Reputation: 3466

jQuery .not() will filter a set of results, so put it to the right of the set you want to filter

Looks like you are thinking of jQuery's .not() select as something that will preclude an element from being added to a set of selected items.

Actually, it's a filter to remove elements that are already selected. So, first select the superset, then (to the right of that) place a not to filter out the undesired elements.

A simple example:

<ul class="wrapper">
<li class="one">select me</li>
<li class="two">don't select me</li>
<li class="three">select me</li>
</ul>


<script>
$(document).ready(function() {
    $(".wrapper").find('li').not(".two").css("color","blue");
});
</script>

Upvotes: 2

gaetanoM
gaetanoM

Reputation: 42054

My proposal is to test the target event element:

$('.tablee').on('click', function(e) {
     if (e.target.tagName != 'A') {
         e.preventDefault();
         $(this).next().slideToggle();
     }
 });

Upvotes: 2

Shaunak D
Shaunak D

Reputation: 20646

From your comment

I´m trying to toggle the next element (the element that comes directly after tablee) when the tablee element is clicked unless those links were not clicked.

Here is a way to ignore the anchors,

$(".tablee").click(function(e) {
    if(!$(e.target).is("a")){
         $(this).next().slideToggle();
    }
});

The above is("a") checks the current clicked target.

Why your code didn't work

$(".tablee").not($(this).find('a'))

In the above selector this refers to the window object and not the .tablee element. Also not() on the parent div would filter the elements with class .tablee and not child elements on the div.

Upvotes: 4

C14L
C14L

Reputation: 12558

From what I understand, you want to select only those children that do not contain a <a> tag, correct?

This would find all the <a> tags, but that's not what you want.

$('td').find('a')

This finds all the <td> that contain <a> tags.

$('td').has('a')

So, you just need to exclude those

$('table').not( $('td').has('a') ).click( function() {
    $(this).next().slideToggle();
});

Not sure if that was the precise element you were looking for, but that's how to find elements that contain certain other elements. In CSS, its 

td:has(>a)

But unfortunately, no browser supports that as of now.

Upvotes: 0

Related Questions