3

jQueryを使用してHTMLを変更する必要があります-（HTMLを制御できないため、クライアント側でこのわずかな変更を行う必要があります）

a<br />が'column'という名前のdivの最初の要素である場合、それを削除する必要があります。

それで：

<div class="column">
   <br />text here lorem ipsum blah<br />

になります：

<div class="column">
   text here lorem ipsum blah<br />

タグが開始タグの直後にある<br />場合にのみ、すべてのタグを削除したくないことに注意してください。<br />

私はこのようなものがうまくいくことを望んでいましたが、喜びはありません

$('<div class="column"><br />').replaceWith('<div class="column">');

助けていただければ幸いです。どうもありがとう！

4

6 に答える 6

3

このような何かがそれを行う必要があります：

var pattern = /^<br\/>/;
$("<div.column").each(function() {
    var $this = $(this),
        text = $this.text();
    if(text.match(pattern)) {
        $this.text(text.replace('<br/>', ''))
    }
});

（無視してください-以下のコメントを理解するためにそのままにしておきます）

編集

これを試して ：

var pattern = /^\n*\s*<br>/;
$("div.column").each(function() {
    var $this = $(this),
        html = $this.html();
    if(html.match(pattern)) {
        $this.html(html.replace(pattern, ''))
    }
});

デモ

@minitechが指摘しているように、元のHTMLに添付されているイベントハンドラーとデータはすべて失われるため、次のいずれかが行われます。

  • イベントハンドラ/データをアタッチする前に置換を実行してください
  • 置換後にイベントハンドラ/データを再インスタンス化するための対策を講じる
  • イベント処理をコンテナ要素に委任する
  • 非破壊的である完全に異なる何かをしなさい-@minitechの答えを見てください。

2番目の編集

たくさん遊んだ後、ついに簡潔なものになりました。@minitechのアプローチのほぼ100％jQueryバージョンを試してください：

$('.column').each(function() {
    $.each(this.childNodes, function(i, c) {
        return !$(c).filter('br').remove().end().text().trim(); 
    });
});

デモ

説明：内部ループは各childNodeに順番にアクセスします。その単一のステートメントは、現在のノードがである場合は削除します<br>が、現在のノードが空白または空白の場合にのみループを進行させます。.end()すべてを1つのメソッドチェーンに保持するための賢明な使用に注意してください。

効率：悪い-そのjQueryメソッドチェーンは数CPUサイクルを消費する必要がありますが、それは支払うべき小さな代償のようです。

読みやすさ：灘に近い。

3番目の編集

穏やかなmodを使用すると、これは先頭の空白/ BR/HTMLコメントの任意の組み合わせを処理します。

$('.column').each(function() {
    $(this.childNodes).each(function(i, c) {
        return !$(c).filter('br').remove().end().text().trim(); 
    });
});

前のバージョンとの違いは、jQueryオブジェクト$(this.childNodes)はノードの削除による影響を受けないままですが、rawthis.childNodesは影響を受け、.each()ループは適切にスキャンされないことです。少なくとも、それが私の最善の説明です。

デモ

于 2012-07-03T20:08:31.607 に答える
1

生のノード操作！

$('.column').each(function() {
    var firstChild = this.firstChild;

    while(firstChild && (firstChild.nodeType === 3 && /^\s*$/.test(firstChild.nodeValue) || firstChild.nodeType === 8)) {
        firstChild = firstChild.nextSibling;
    }

    if(firstChild && firstChild.nodeName === 'BR') {
        this.removeChild(firstChild);
    }
});​

これがデモです。

于 2012-07-03T20:07:28.353 に答える
0

それが最初の場所にある場合は、それを削除するのはどうですか？

var relevantDiv = $('#someDiv');
var divHtml = relevantDiv.html();
if ($.trim(divHtml).indexOf('<br') == 0)
{
    relevantDiv.html(divHtml.substr(divHtml.indexOf('>')+1));
}

最初は、あらゆる種類のbrタグと空白を処理します。

于 2012-07-03T20:01:47.627 に答える
0

どうですか：

$("div.column").each(function(){
    var ws=true;
    $(this).contents().filter(function(){
        if (this.nodeName.toLowerCase() === 'br' && ws){
            ws = false;
            return true;
        }
        ws &= $.trim($(this).text()) === "" && this.nodeName === "#text";
        return false;
    }).remove();
});​

http://jsfiddle.net/bnWM7/1/

于 2012-07-03T21:13:26.797 に答える
-1

この人はどうですか：

var br = $("div.column br:first-child");

if(br.length > 0 && br[0].previousSibling == null)
{
    br.remove();
}

http://jsfiddle.net/zeDn3/3/

于 2012-07-03T20:59:48.003 に答える
-2

次のようなものを試してください。

    var content = $('div.column').html();
    // there remove <br /> from content if it exits
    $('div.column').empty().append(content);
于 2012-07-03T20:00:37.177 に答える