Jquery在标记之前的块引号中添加标记
Jquery add tag inside a blockquote before a tag
我在一个块引号中有这样的文本:
<blockquote class="tr_bq">
4 Text<br />
20 TExt<br />
2 Another text a little longer<br />
<br />
20 text</blockquote>
我想为每行添加一个标记,或者将br转换为包含一个类。如果br包含了所有的行,我就会知道怎么做。这就是我想要的结束方式:
<blockquote class="tr_bq">
<strike>4 Text</strike><br/>
<strike>20 TExt</strike><br/>
<strike>2 Another text a little longer</strike><br/>
<br />
<strike>20 text</strike></blockquote>
或
<blockquote class="tr_bq">
<br class="X">4 Text<br>
<br class="X">20 TExt<br>
<br class="X">2 Another text a little longer<br>
<br />
<br class="X"> 20 text</br></blockquote>
我试过用保鲜膜,但没有成功,有什么办法吗?
您可以通过操作blockquote的内部HTML来实现这一点。
$('.tr_bq').each(function () {
var html = $(this).html();
var newHtml = html.split('<br>').map(function (str) {
return '<strike>' + str + '</strike>';
}).join('<br>');
$(this).html(newHtml);
});
只是为了提供一种简单的JavaScript方法来实现这一点,避免(不必要的)使用库:
function wrapNodesWith(nodes, tag) {
// if we have neither nodes to wrap, nor a tag to wrap
// them with, we quit here:
if (!nodes || !tag) {
return false;
}
// otherwise:
// we convert the nodes to an array (using Array.prototype.slice,
// in conjunction with Function.prototype.call):
nodes = Array.prototype.slice.call(nodes, 0);
// if the tag parameter passed to the function is a string ('strike'),
// we create that element using document.createElement(tag),
// otherwise we assume we've got an HTMLElement (this is a very
// naive check) and so we use that:
tag = 'string' === typeof tag ? document.createElement(tag) : tag;
// an unitialised variable for use within the following forEach:
var clone;
nodes.forEach(function(n) {
// n is the node over which we're iterating,
// cloning the tag (to avoid multiple calls
// to document.createElement):
clone = tag.cloneNode();
// setting the textContent of the clone to the nodeValue
// of the node (if it's a textNode), or to the textContent of
// element (again a simple check):
clone.textContent = n.nodeType === 3 ? n.nodeValue : n.textContent;
// replacing the childNode, using parentNode.replaceChild(),
// inserting clone and removing n:
n.parentNode.replaceChild(clone, n);
});
}
// finding the first <blockquote> element:
var blockquote = document.querySelector('blockquote'),
// creating an array of the childNodes of the <blockquote>:
children = Array.prototype.slice.call(blockquote.childNodes, 0),
// filtering the children array, retaining only those nodes for
// which the assessment returns true:
textNodes = children.filter(function(n) {
return n.nodeType === 3;
});
// can be called with:
wrapNodesWith(textNodes, 'strike');
// or:
wrapNodesWith(textNodes, document.createElement('strike'));
function wrapNodesWith(nodes, tag) {
if (!nodes || !tag) {
return false;
}
nodes = Array.prototype.slice.call(nodes, 0);
tag = 'string' === typeof tag ? document.createElement(tag) : tag;
var parent, clone;
nodes.forEach(function(n) {
clone = tag.cloneNode();
clone.textContent = n.nodeType === 3 ? n.nodeValue : n.textContent;
n.parentNode.replaceChild(clone, n);
});
}
var blockquote = document.querySelector('blockquote'),
children = Array.prototype.slice.call(blockquote.childNodes, 0),
textNodes = children.filter(function(n) {
return n.nodeType === 3;
});
wrapNodesWith(textNodes, 'strike');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="tr_bq">
4 Text
<br />20 TExt
<br />2 Another text a little longer
<br />
<br />20 text
</blockquote>
参考文献:
- CCD_ 1
- CCD_ 2
Array.prototype.slice()
- 条件('ternary')运算符
document.createElement()
document.querySelector()
Function.prototype.call()
Node.nodeValue
Node.replaceChild()
好吧,
我设法使它与这个工作:
var pre = document.getElementsByTagName('blockquote'),pl = pre.length;
for (var i = 0; i < pl; i++) {
var pro = pre[i].innerHTML.split(/<br>/), pz = pro.length;
pre[i].innerHTML = '';
for (var a=0; a < pz ; a++) {
pre[i].innerHTML += '<strike>' + pro[a] + '</strike><br/>';
}
}
相关文章:
- 如何使用javascript选择字符串的部分,添加html标记或删除部分
- 动态添加的标记不会'无法正确使用日期选择器
- 添加@javascript标记时,Cucumber中的HTTP身份验证失败
- 在 Javascript 生成的列表中,如何将自定义属性添加到 标记
- 如何在添加新标记和图层之前清除所有标记和图层的传单地图
- 如何在Phonegap中进行AJAX调用时添加加载屏幕
- 如何将多段线添加到标记阵列中
- 在添加新标记之前删除以前的标记
- 如何隐藏或删除Ngmap中动态添加的标记
- 在AngularJS模型中添加/删除标记
- 根据谷歌 Api v3 书/也用一个按钮添加一个标记
- 如何在加载前添加加载动画
- 通过添加自动标记库来了解 meteorjs 范围
- 在谷歌地图中添加新标记之前,先删除以前的标记
- 如何在网页加载之前添加加载页面
- 将数据属性添加到标记并使用 JQuery 检索它
- 将声音添加到标记数组 - 谷歌地图JavaScript
- 将侦听器添加到标记在循环中不起作用
- 在加载后添加预标记;t生效
- Google Maps API不会加载正确的中心位置,而是在最后添加的标记区域加载