使用jQuery选择除标记组中的子项以外的所有子项

Question

I have a list structure like this (note the two lists with .browser class and one of them with data-click="yes")

<ul class="browser" data-click="yes">
<li><a href="#">Group 1</a>
    <ul>
        <li><a href="#">Item_1</a></li>
        <li><a href="#">Item_2</a></li>
        <li><a href="#">Item_3</a></li>
    </ul>
</li>
<li><a href="#">Group_2</a>
    <ul>
        <li><a href="#">Item_4</a></li>
        <li><a href="#">Item_5</a></li>
        <li><a href="#">Item_6</a></li>
        <li><a href="#">Group_3</a>
            <ul class="browser">
                <li><a href="#">Item_1</a></li>
                <li><a href="#">Item_2</a></li>
                <li><a href="#">Group_4</a>
                    <ul>
                        <li><a href="#">Item_1</a></li>
                        <li><a href="#">Item_2</a></li>
                        <li><a href="#">Item_3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item_3</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>

I would like to assign an on click action with jQuery to the A elements within the <ul class="browser" data-click="yes"> element, however I do not want this behavior to propagate further to the A elements in the child element <ul class="browser"> . Moreover, it is important for me to keep the class .browser for both those lists.

I tried to use :not selector in the following way

$("body").on("click", "UL.browser[data-click='yes'] :not(.browser) A", function (event) {
// do something
});

and many other variants, but without success. It is also important for me to use the structure with appending the event to body since I am changing the structure dynamically.

I found many variants of this problem here, however none of them is quite the same and they did not work for me. I sense that I misunderstand the :not selector in some way, however I still can't get it right.

Answer 1

I understand you only want to attach the click event to the "first" level of <a> which are children of a "browser" with data-click set to "yes", you can easily do that by only selecting direct childs:

$("body").on("click", "ul.browser[data-click='yes'] > li > a", function (event) {
    // Do something
});

Answer 2

If I understand well, you want to handle the click on a elements inside ul.browser[data-click='yes'] but not inside an internal .browser element :

$("body").on("click", "ul.browser[data-click='yes'] a:not(.browser .browser *)", function (event) {
  // do something
});

Demonstration

Answer 3

This is not the optimal way but should work:

$('ul.browser').each(function()
{
   if($(this).data('click') === 'yes')
   {
       $(this).on('click', function(e)
       {
            //Stuff
       });   
   } 
});

Answer 4

As I understood, you want to enable click event function for all <a> tags inside <ul> having class .browser with attribute data-click="yes" and you want to exclude all the other <a> tags that comes under internal <ul> tag having class .browser .

$(document).ready(function(){

  $("body").on("click", "ul.browser[data-click='yes']  li a:not(.browser .browser *)",function(){
    alert("hi");
  });

});

The above code explains => add click function for all <a> tags that comes inside <li> tags whose parent is <ul> tag having class .browser and attribute data-click='yes' and don't add click event for any of the tags having hierarchy .browser .browser