标签: dom-manipulation

如何观察'a'标签的内容 - jquery

我有一个空白<a>标签,内容通过外部javascript加载.我想观察<a>它及其内容更改何时执行另一项任务.内容只会改变一次.

可以这样做吗?

我也在使用jQuery.

提前致谢

javascript jquery dom dom-manipulation observer-pattern

13
推荐指数
2
解决办法
1120
查看次数

jQuery如何从<div>中删除所有<span>标签?

我尝试了以下两种方法,但没有一种方法可行:

$('#divhtml').remove('span')

$('#divhtml').find('span').remove()
Run Code Online (Sandbox Code Playgroud)

编辑: $('#divhtml').find('span').remove()第二次尝试.

jquery dom-manipulation

13
推荐指数
2
解决办法
4万
查看次数

如何使用JavaScript添加布尔属性

如何使用JavaScript添加布尔属性?例如,您如何更改:

<p><p contenteditable>

<p><p data-example>

html javascript dom-manipulation

13
推荐指数
2
解决办法
2万
查看次数

如何在不删除子项的情况下删除包装器(父元素)?

我想删除父母而不删除孩子 - 这可能吗?

HTML结构:

<div class="wrapper">
  <img src"">
</div>
<div class="button">Remove wrapper</div>
Run Code Online (Sandbox Code Playgroud)

点击我想要的按钮后:

<img src"">
<div class="button">Remove wrapper</div>
Run Code Online (Sandbox Code Playgroud)

html javascript jquery dom dom-manipulation

13
推荐指数
5
解决办法
1万
查看次数

两次追加DOM元素(jQuery)

有人可以解释为什么下面的代码片段不添加<foo>到两个#a#b

HTML:

<div id="a"></div>
<div id="b"></div>
Run Code Online (Sandbox Code Playgroud)

JS:

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo);
    $("#b").append($foo);
});
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

编辑:感谢有用的点,.append()移动元素的事实解释了这种行为.由于我的应用程序中的元素实际上是一个Backbone View .el,我宁愿不克隆它.

html javascript jquery dom dom-manipulation

12
推荐指数
3
解决办法
1万
查看次数

用jQuery删除3个最后一个div

<div id="widgetAreaFooter">
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
<div class="row">4</div>
<div class="row">5</div>
<div class="row">6</div>
<div class="row">7</div>
</div>
Run Code Online (Sandbox Code Playgroud)

如何删除最后3个div?

我试过这个,但它不起作用:/

var row = $( '#widgetAreaFooter>.row' );
var nbr = row.length ;

for ( var i=4;i<nbr;i++ ) row.get(i).remove();
or
for ( var i=4;i<nbr;i++ ) row[i].remove();
Run Code Online (Sandbox Code Playgroud)

jquery dom-manipulation dom-traversal

10
推荐指数
1
解决办法
1万
查看次数

有没有办法只获取top元素的innerText(并忽略子元素的innerText)?

有没有办法只获取top元素的innerText(并忽略子元素的innerText)?

例:

<div> 
   top node text 
   <div> child node text </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如何在忽略"子节点文本"的同时获取"顶级节点文本"?top div的innerText属性似乎返回内部顶部文本的连接.

html javascript dom dom-manipulation

10
推荐指数
3
解决办法
1万
查看次数

"虚拟"dom操纵?

我知道做多次dom操作是不好的,因为它会强制多次重绘.

即:

$('body').append('<div />')
         .append('<div />')
         .append('<div />')
         .append('<div />');
Run Code Online (Sandbox Code Playgroud)

相反,一个更好的做法显然是:

$('body').append('<div><div></div><div></div><div></div><div></div></div>');
Run Code Online (Sandbox Code Playgroud)

但我对虚拟操作感到好奇

即:

$('<div />').append('<div />')
            .append('<div />')
            .append('<div />')
            .append('<div />')
            .appendTo('body');
Run Code Online (Sandbox Code Playgroud)

它是否仍然很糟糕,显然会多次调用函数会产生一些开销,但是会有任何严重的性能命中吗?


我问的原因是这样的:

var divs = [
    {text: 'First',  id: 'div_1', style: 'background-color: #f00;'},
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'},
    {text: 'Third',  id: 'div_3', style: 'background-color: #00f;'},
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'},
    {text: 'Fifth',  id: 'div_5', style: 'background-color: #0f0;'},
    {text: 'Sixth',  id: 'div_6', style: 'background-color: #00f;'}
];

var element = $('<div />');

$.each(divs, function(i,o){ …
Run Code Online (Sandbox Code Playgroud)

javascript jquery dom dom-manipulation

9
推荐指数
1
解决办法
3370
查看次数

querySelectorAll:操纵节点

据我所知,querySelector返回一个真正的可更改元素,同时querySelectorAll返回一个非实时静态节点集.

我想调整适合特定选择器的所有元素的样式.它适用于第一个元素querySelector,但不适用于所有匹配元素querySelectorAll.我猜那是因为节点集是非实时的.

有解决方法吗?或者我错过了什么?

javascript dom-manipulation node-set

8
推荐指数
2
解决办法
6576
查看次数

在DOM之外使用jQuery克隆

我一直在做一个小项目,我正在使用jQuery .clone()方法.与此相关的陷阱是在具有唯一标识符的HTML上使用它.所以我继续实现getComputedStyle以找到原始唯一元素的样式属性,以便将其复制到克隆并在之后给出一个新的id(是的,它可以提供性能问题,但它是实验性的).

根据jQuery规范,在克隆之后但在追加之前执行此操作将使操作发生在DOM之外(因此不会发生id'违规').但是当我在克隆对象后尝试查找元素的样式属性时,我注意到浏览器有一些奇怪的行为.在此之前,所有浏览器都会返回相同的值,但在克隆之后:

  • Firefox - 无忧无虑,有趣的是克隆的计算样式是实际的CSS值而不是计算数据(以像素为单位).

  • IE - 似乎有效,但价值不一定正确.

  • Chrome - 无法计算.这是一个例子:

http://codepen.io/anon/pen/zxqmNK?editors=011

var elements = [];
var objects = [];

$('body').find('[id]').each(function() {
    elements.push(this);
});

$('body').clone().find('[id]').each(function() {
    objects.push(this);
});

$.each(elements, function(key, element) {
    var current = window.getComputedStyle(element, null).getPropertyValue('width');
    $('#log').append('<p>' + element.id + ': ' + current + '</p>');
});

$('#log').append('</br>');

$.each(objects, function(count, object) {
    var current = window.getComputedStyle(object, null).getPropertyValue('width');
    $('#log').append('<p>' + object.id + ': ' + current + '</p>');
});
Run Code Online (Sandbox Code Playgroud)

有谁知道这是一个错误还是有过类似的行为?网络方面不是很多(甚至不是Stackoverflow).提前感谢您的任何见解.

编辑 - 做了一些更多测试,看起来IE的行为与Chrome相同.只是没有返回任何内容,所有内容都设置为"自动".如果通过使用访问克隆对象的样式,则.css()返回所有值0px …

css jquery clone dom-manipulation getcomputedstyle

8
推荐指数
1
解决办法
579
查看次数