如何在jQuery中选择链接而不是子链接?

时间:2021-12-21 19:47:16

How in jQuery can I select just the links inside a div element and not the child div elements contained within that div?

如何在jQuery中我只选择div元素中的链接而不是该div中包含的子div元素?

<div>
    <a>Link 1</a>
    <a>Link 2</a>
    <div>
        <a>Not these 1</a>
        <a>Not these 2</a>
    </div>
</div>

5 个解决方案

#1


use the direct child selector >

使用直接子选择器>

e.g

$('div>a')

UPDATE: to appease Mr RoBorg

更新:安抚RoBorg先生

If you do have anchors inside nested elements inside the first div then the following will work. This uses a filter to ensure that the parent div is indeed the div you are targetting rather than a nested div.

如果你在第一个div内的嵌套元素中有锚点,则以下内容将起作用。这使用过滤器来确保父div确实是您要定位的div而不是嵌套div。

Demo

  var firstDivAnchors = $('div a').filter( function(){
        return $(this).closest('div').is('#yourDiv');
  });

#2


If there is a specific div you want to target, you can try:

如果您想要定位特定div,可以尝试:

$("div#mydiv a :not(div a)");

$(“div #mydiv a:not(div a)”);

EDIT: It would be great if you post some more context (HTML) :)

编辑:如果你发布更多的上下文(HTML):)会很棒:)

#3


I don't remember quite well, but doesn't children() does this work?

我记不太清楚了,但是孩子们()这不起作用吗?

$(thisDiv).children('a')

In docs.jquery.com it reads: children() Get a set of elements containing all of the unique immediate children of each of the matched set of elements.

在docs.jquery.com中,它读取:children()获取一组元素,其中包含每个匹配元素集的所有唯一直接子元素。

#4


I think Danita was on the right track, but her sample did not work for me either. Using .not(), however, did work:

我认为Danita是在正确的轨道上,但她的样本也不适合我。然而,使用.not()确实有效:

Given:

<div id="testdiv">
    <span><a>span a</a></span> <a>a</a>
    <div>
        <a>div a</a><span><a>div span a</a></span>
    </div>
</div>

find only a tags not nested inside nested divs.

找到一个没有嵌套在嵌套div中的标签。

var test = $('#testdiv').find('a').not('#testdiv div a');
$(test).each(function(){
    trace( $(this).html());
});

Not only will it ignore a tags inside the nested div, it will NOT ignore the a tags nested in spans.

它不仅会忽略嵌套div中的标记,而且不会忽略嵌套在span中的标记。

#5


I had the same need and looked around. Inspired by a few answers here I wrote this

我有同样的需要,环顾四周。受到一些答案的启发,我写了这篇文章

$('div a').not('div div a')

I have tested this and it works! :-)

我测试了这个,它的工作原理! :-)

#1


use the direct child selector >

使用直接子选择器>

e.g

$('div>a')

UPDATE: to appease Mr RoBorg

更新:安抚RoBorg先生

If you do have anchors inside nested elements inside the first div then the following will work. This uses a filter to ensure that the parent div is indeed the div you are targetting rather than a nested div.

如果你在第一个div内的嵌套元素中有锚点,则以下内容将起作用。这使用过滤器来确保父div确实是您要定位的div而不是嵌套div。

Demo

  var firstDivAnchors = $('div a').filter( function(){
        return $(this).closest('div').is('#yourDiv');
  });

#2


If there is a specific div you want to target, you can try:

如果您想要定位特定div,可以尝试:

$("div#mydiv a :not(div a)");

$(“div #mydiv a:not(div a)”);

EDIT: It would be great if you post some more context (HTML) :)

编辑:如果你发布更多的上下文(HTML):)会很棒:)

#3


I don't remember quite well, but doesn't children() does this work?

我记不太清楚了,但是孩子们()这不起作用吗?

$(thisDiv).children('a')

In docs.jquery.com it reads: children() Get a set of elements containing all of the unique immediate children of each of the matched set of elements.

在docs.jquery.com中,它读取:children()获取一组元素,其中包含每个匹配元素集的所有唯一直接子元素。

#4


I think Danita was on the right track, but her sample did not work for me either. Using .not(), however, did work:

我认为Danita是在正确的轨道上,但她的样本也不适合我。然而,使用.not()确实有效:

Given:

<div id="testdiv">
    <span><a>span a</a></span> <a>a</a>
    <div>
        <a>div a</a><span><a>div span a</a></span>
    </div>
</div>

find only a tags not nested inside nested divs.

找到一个没有嵌套在嵌套div中的标签。

var test = $('#testdiv').find('a').not('#testdiv div a');
$(test).each(function(){
    trace( $(this).html());
});

Not only will it ignore a tags inside the nested div, it will NOT ignore the a tags nested in spans.

它不仅会忽略嵌套div中的标记,而且不会忽略嵌套在span中的标记。

#5


I had the same need and looked around. Inspired by a few answers here I wrote this

我有同样的需要,环顾四周。受到一些答案的启发,我写了这篇文章

$('div a').not('div div a')

I have tested this and it works! :-)

我测试了这个,它的工作原理! :-)