使用 jQuery 定位具有单个子元素且该子元素之外没有文本节点的元素
Target elements with single child AND no text nodes outside that child, using jQuery
使用 jQuery,我试图定位所有仅包含子锚元素(作为直接后代)并且在该子元素之外没有文本节点的段落元素,例如:
<p><a href="http://...">Some link</a></p>
我试过 jQuery 的 only-child
选择器,但文本节点显然没有被视为子元素。我还查看了 contents()
并假设我可以定位其开始标记为第一个节点的锚元素。但是,对于后者,我正在构建的网站是其他人将使用 CMS 编写的博客,因此我无法确保他们不会以 link 开始一个常规段落,这将添加不需要的样式。
我对 jQuery 比较陌生 - 大约一个月。只是想让你知道...
谢谢!
$('p').filter(function() {
return ( 1 === $(this).find('*').length && 1 === $(this).find('a').length && $(this).text() === $(this).find('a').text() );
});
编辑:我一开始并不知道 :only-child
选择器。有了它,更干净:
$('p').has('a:only-child').filter(function() {
return $(this).find('a').text() === $(this).text();
});
灵感来自 zeropublix 评论:
$("p").has("a:only-child").filter(function() {
return $(this).find("a").text() === $(this).text();
});
您也可以对其进行原型制作,使您的代码更简洁:
$.fn.onlyChild = function(child) {
return this.has(child + ":only-child").filter(function() {
return $(this).find(child).text() === $(this).text();
});
}
使用 jQuery,我试图定位所有仅包含子锚元素(作为直接后代)并且在该子元素之外没有文本节点的段落元素,例如:
<p><a href="http://...">Some link</a></p>
我试过 jQuery 的 only-child
选择器,但文本节点显然没有被视为子元素。我还查看了 contents()
并假设我可以定位其开始标记为第一个节点的锚元素。但是,对于后者,我正在构建的网站是其他人将使用 CMS 编写的博客,因此我无法确保他们不会以 link 开始一个常规段落,这将添加不需要的样式。
我对 jQuery 比较陌生 - 大约一个月。只是想让你知道...
谢谢!
$('p').filter(function() {
return ( 1 === $(this).find('*').length && 1 === $(this).find('a').length && $(this).text() === $(this).find('a').text() );
});
编辑:我一开始并不知道 :only-child
选择器。有了它,更干净:
$('p').has('a:only-child').filter(function() {
return $(this).find('a').text() === $(this).text();
});
灵感来自 zeropublix 评论:
$("p").has("a:only-child").filter(function() {
return $(this).find("a").text() === $(this).text();
});
您也可以对其进行原型制作,使您的代码更简洁:
$.fn.onlyChild = function(child) {
return this.has(child + ":only-child").filter(function() {
return $(this).find(child).text() === $(this).text();
});
}