お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
------------------------------------------

このように無駄なspanタグを削除したいのですが、可能でしょうか?
ご存知の方、ご回答いただければ幸いです。
よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

質問文を素直に実行するのなら。




$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
</p>
</div>


改行コードは半角スペースとして表示されます。(HTMLの文法に準拠。)
.children()にtextNodeが入っておらず、意外と苦労しました。
    • good
    • 1
この回答へのお礼

ご回答いただきありがとうございます。

素晴らしいです!
当方の求めていた回答ズバリでした。

この度はご回答いただき本当にありがとうございました。

お礼日時:2014/07/26 14:58

検証環境がないのでちょっと適当になってしまいますが……。


 
// 対象の指定
var d_span_target = $('span.a') ;
//削除前テキストの取得
var d_span_txt = d_span_target.next().text();
//書き換え
d_span_target.next().html(d_span_txt);

とかでどうでしょう?
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

実際のソースは削除前テキストが対象の次にあるとは限らないため、
当方の想定しているものとは少し異なっていました。

ただ、jqueryでの解決策を教えていただき、感謝しております。
ありがとうございます。

お礼日時:2014/07/26 14:50

なぜjqueryなのでしょう。


単純にスタイルシートで
span[class]{display:inline;}
span{display:none;}
と属性セレクタで上書きすればよいだけかと・・・
詳細度が11と1だと11のほうが大きいので・・
 HTML/CSSをきちんと身につけましょう。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

質問にもお書きしましたが、jqueryを使っての解決策を求めています。
さらに、残念ながらその方法では、

かきくけこ
たちつてと

の文字まで消えてしまいますね、、、;

お礼日時:2014/07/26 14:55

何を持ってして無駄というのでしょうか?



上記の理由いかんかもしれませんが、そのspanを消す処理自体が無駄な気がします。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

>>何を持ってして無駄というのでしょうか?
何一つスタイルを指定していない文をわざわざ<span>で囲っている点です。
確かに消さなくても問題ありませんが、無意味なタグは極力消したいためです。

お礼日時:2014/07/26 14:39

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qjqueryを使って無駄なspanタグを削除したい

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
------------------------------------------

このように無駄なspanタグを削除したいのですが、可能でしょうか?
ご存知の方、ご回答いただければ幸いです。
よろしくお願い致します。

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
-...続きを読む

Aベストアンサー

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
</p>
</div>


改行コードは半角スペースとして表示されます。(HTMLの文法に準拠。)
.children()にtextNodeが入っておらず、意外と苦労しました。

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
...続きを読む

Qjqueryで、あるタグが削除された時に、変わりのタグやテキストを表示する条件式について

jqueryを使い、あるタグが削除された時に、変わりのタグやテキストを表示させたいのですがうまくいきません。
<script type="text/javascript">
$(function() {
$("table tr th.emp:empty").closest("table").remove();
});
</script>

<div id="content">
<table>
<tr>
<th>題名</th>
<td class="emp"></td>
</tr>
</table>
</div>

<td class="emp"></td>が空白の場合、tableタグが削除されソースは<div id="content"></div>となりますが、
tableタグが削除されたときに、新たなタグやテキストを入れることはできるのでしょうか?

<div id="content">該当するデータはありません</div>などと入れられたらと思っています。
以下のようにしてみましたが、当然ダメでした。

<script type="text/javascript">
$(function() {
$("table tr th.emp:empty").closest("table").remove();
});
</script>
<script type='text/javascript'
$(window).load(function(){
$("div#content:empty").text("該当するデータはありません")
});
</script>

jqueryを使い、あるタグが削除された時に、変わりのタグやテキストを表示させたいのですがうまくいきません。
<script type="text/javascript">
$(function() {
$("table tr th.emp:empty").closest("table").remove();
});
</script>

<div id="content">
<table>
<tr>
<th>題名</th>
<td class="emp"></td>
</tr>
</table>
</div>

<td class="emp"></td>が空白の場合、tableタグが削除されソースは<div id="content"></div>となりますが、
tableタグが削除されたときに、新たなタグやテ...続きを読む

Aベストアンサー

ANo1、2です。

jQueryの場合、$(selector) で取得するのは、jQuery独特のjQuery objectというものです。
対象が単数でも複数でも同じように扱えるように考えられていて、その要素数を取得するにはlength属性を参照すればよいようになっています。
http://api.jquery.com/length/

それなので、if(td.length) では要素があること(1以上である)をチェックしていましたが、jQueryの場合は該当要素が無い場合は、メソッドが無視されるようにできているので、チェックも不要であったという意味です。

通常のjavascriptでは単数の要素と複数の要素(要素リストなど)では扱いが変わりますし、要素が無い場合に何らかの処理をしようとすると、そこでエラーとなる場合があるので、ついうっかりと、いらぬチェックを書いてしまった次第です。

QDreamweaverで「選択範囲の周囲」タグ削除

DreamweaverでDivタグを挿入する際、「選択範囲の周囲」を選択すると、
指定範囲の最初と最後にタグを挿入できますが、
それと逆のことはできないでしょうか?

具体的には、下記を選択して、
最初と最後のタグだけを削除したいです

<span>このspanタグだけを削除したい</span>


<環境>
DreamweaverCS3

Aベストアンサー

コードビューにして、範囲を選択 CTRL+Fで置き換えを選択して<span>と</SPAN>
を空白に置き換えればOKです、

QJQueryで$("dt span")クリック動作

JQueryで$("dt span")をクリックしたときに
隣接するddタグの部分を表示させるには以下の記述を
どのように修正すればよいのでしょうか?

<html>
<head>
<style type="text/css">
dl { margin-bottom: 20px; }
dd { display: none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("dt span").click(function(){
$("+dd",this).slideToggle();
});
});
</script>
</head>
<body>
<dl>
<dt>toggle<span>開く</span></dt>
<dd>テキストが入ります。</dd>
</dl>
<dl>
<dt>toggle<span>開く</span></dt>
<dd>テキストが入ります。</dd>
</dl>
</body>
</html>

ご存じの方がおられましたらご回答をよろしくお願いします。

JQueryで$("dt span")をクリックしたときに
隣接するddタグの部分を表示させるには以下の記述を
どのように修正すればよいのでしょうか?

<html>
<head>
<style type="text/css">
dl { margin-bottom: 20px; }
dd { display: none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("dt span").click(function(){
$("+dd",this).slideToggle();
});
});
</script>
</head>
<body>
<dl>
<dt>toggle<span>開...続きを読む

Aベストアンサー

存じてはいませんが…


$(function(){
$("dt span").click(function(){
$(this).parent().next("dd:first").slideToggle();

//以下おまけ
//var str = $(this).html();
//$(this).html(str=="開く"?"閉じる":"開く");
});
});

Qspanタグをショートカットで

DreamweaverMX2004をMacで使用しています。
spanタグをショートカットで入力する方法を教えてください。
因にコマンドの追加で作成したspanタグの挿入コマンドをショートカットに登録しようとしたらできませんでした。もともと標準でその機能はあるのでしょうか?

Aベストアンサー

No.1です。
回答おそくなりすみません。

3の「SPAN挿入」を誤って「P挿入」と記述しています。これは誤りです。すみません。

右側のスニペットパネルの中に「span挿入」はありますか。
どこか思いもしないようなフォルダの中に保存されているとかいうような事はありませんか。
新規にスニペットを作成する際には、保存したいフォルダをクリックした状態で新規スニペットを作成すると良いかもしれません。
違うフォルダに保存した場合でもマウスドラッグで移動させる事が可能です。

なるべくオリジナルのスニペットを作成する際には、新規フォルダを作成し「オリジナル」など判りやすい名前をつけて、マウスドラッグなどでオリジナルのスニペットをフォルダ内に移動させておくと、探しやすいのではないかと思います。

Qjqueryにて、独自属性を使ってタグを操作したい

皆様

いつもお世話になります。
早速ですがご質問させていただきます。
現在、独自属性を使った学習をしております。

jqueryでidを使って以下のタグの「追加位置」に「追加要素」を挿入すると
以下のようになると思いますが、

<div id="aaa">
<!--追加位置-->
</div>

$(div#aaa).prepend("追加要素");

独自属性を使って、同じことをしようとする際、idを識別するのに「#」を使うと思いますが、独自属性はどういう識別子(★にあたる箇所)を使うのでしょうか?

div data-hoge="aaa">
<!--追加要素-->
</div>

var dokuji = $('div').attr('data-hoge');
$(★dokuji).prepend("追加要素");

お詳しい方ご教授のほど宜しくお願い致します。

開発環境:
Dreamweaver CC
Firefox 34.0.5

Aベストアンサー

属性のセレクタが用意されていますので、それで対応可能かと思います。
 http://api.jquery.com/attribute-equals-selector/

でも、独自属性を作らなくても、大抵のことなら通常のクラス設定で対応できるように思います。CSSでの指定なども考え合わせるとその方が便利ではないのかな・・・

Qタグをでくくりたい

Javascript初心者を脱出したい者です。

<img>タグをgetElementsByTagNameで取得し、
<span class="align_left"><img .... /></span> みたいに囲いたいと考えています。

条件として、<img>タグの親ノードは<p>タグです。
全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert nextContent</title>
<script type="text/javascript">
<!--
  window.onload = function() {
    var out_span = document.createElement('span');
    out_span.setAttribute('class', 'align_left');

    var list = document.getElementsByTagName('img');
    var img = list[0];
    /* この後、
      どうやって、out_span を挿入すればよいのか?
     */
  }
//-->
</script>
</head>
<body>
<h1> IMGタグに親ノードを追加したい </h1>
<p>
文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。
<img src="../images/logo.gif" alt="Logo" />
</p>
</body>
</html>

★ インデントは全角スペースで行っております。

ご教示お願いします。

Javascript初心者を脱出したい者です。

<img>タグをgetElementsByTagNameで取得し、
<span class="align_left"><img .... /></span> みたいに囲いたいと考えています。

条件として、<img>タグの親ノードは<p>タグです。
全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert nextContent</title>
<script type="text/javascript">
<!--
  window.onload = function() {
    v...続きを読む

Aベストアンサー

// この後...
out_span.appendChild(img.parentNode.replaceChild(out_span, img));

nodeObject.parentNode
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-parentNode
nodeObject.replaceChild( newChild, oldChild )
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-replaceChild
nodeObject.appendChild( newChild )
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-appendChild

QフォームからjQuery,jQuery.jsonを使ってJSONを作っ

フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。
こんばんは。2、3日ずっと悩んでて解決しないので助けてください。
jQuery,jQuery.jsonを使ってJSONを作成しています。
クリックイベントに
var form = $("#sform");
var json = $(form.serializeArray());
var strJson = $.toJSON(json);
という形をとって
$.ajax({
url : "request.php",
type : "post",
data : strJson,
success: function(request){
$('#result').html(request);
}
});
で送っています。
ただPHP側で
var_dump($_POST);
を行ってもArray ( ) と表示されます。
firebugで見たところpostに入っているデータは以下の通りです。
{"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4}

var_dumpで表示できないのはなぜでしょうか?
上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。
ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。
基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。
よろしくお願いします。

フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。
こんばんは。2、3日ずっと悩んでて解決しないので助けてください。
jQuery,jQuery.jsonを使ってJSONを作成しています。
クリックイベントに
var form = $("#sform");
var json = $(form.serializeArray());
var strJson = $.toJSON(json);
という形をとって
$.ajax({
url : "request.php",
type : "post",
data : strJson,
success: function(request){
...続きを読む

Aベストアンサー

「var json = $(form.serializeArray());
このデータを送るのが一番標準ということでいいのでしょうか?」

=>そうです。わざわざJSONオブジェクトに作り変える必用は無いです。
  .serializeArray()で、jQueryが、JSON形式の文字列データに変換して
  くれてるんです。

「phpで json_decodeしなくてもデータがそのまま二次元配列で渡っている」

=>そう思ってもよいでしょう。正しくは、二次元配列の形式に格納する
  形式の文字列データで渡っているですが

 PHPで、
echo file_get_contents("php://input");
 として見れば、送信されてくる文字列データが見れます。

Qspanのタグの中を1列で表示

下記のspanのタグの中を1列で表示するにはCSSをどのようにしたらいいのでしょうか。

<span>
ああああ
<downcount id="countdown0" class="hasCountdown">
<div class="countdown_row countdown_amount">7339日 00:55:13</div>
</downcount>
いいい
</span>

Aベストアンサー

先のご回答にもありますが、spanはインライン要素、divはブロックレベル要素です。
インライン要素の中にブロックレベル要素を入れてはいけない、というのが基本的な原則です。

下手なたとえかもしれませんが、インライン要素を液体(流し込めるもの)、ブロックレベル要素を固体(箱のようなもの)とお考えください。
インライン要素にはサイズや余白を指定しても効きませんし、ブロックレベル要素を包み込もうとしても、うまく行きません。
逆にブロックレベル要素にインライン要素を入れるのは問題ありません。

不勉強にして<downcount>というタグは見たことがないのですが、
<div>
ああああ
<downcount id="countdown0" class="hasCountdown">
<span class="countdown_row countdown_amount">7339日 00:55:13</span>
</downcount>
いいい
</div>
という記述ではいけないのでしょうか。

Qお世話になります。今ホームページビルダーとMT5を使ってサイトを作成し

お世話になります。今ホームページビルダーとMT5を使ってサイトを作成し、運営しております。以前はマーキーを使っていたところに、目立たせたいと思い、電光掲示板(ティッカー)を設置しました。なんとかレイアウトを調整し、3種類順番に表示できるようになったのですが、肝心のところ、右から左にうごきません。サイトを検索し変更を加えたものが下記になります。どうか宜しくお願いいたします。
http://www.tcollection.net/home.html
のフラッシュの直下のテキスト部分です。
<style type="text/css">
<!--
#msgBx{
position :relative;
top :-23px;
left :198px;
font-size :15px;
padding :5 0 0 10;
color :navy;
background-color :#fffff;
height :25px;
width :599px;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload = scrMsg;
var JSTKcnt = 0;
var JSTKstpX = 10; //停止座標
var JSTKstpTime = 200; //停止時間
var JSTKposLeft = 600; //開始座標
var JSTKtime;
var JSTKi = 0; //配列変数

var JSTKlist = new Array(); //流すメッセージの配列
JSTKlist[0]="☆新人「佐々木 あまね」さん 『限定!!最大4,000円OFFプレゼント』実施中!!";
JSTKlist[1]="☆新人「天咲 ちひろ」さん『限定!!最大4,000円OFFプレゼント』実施中!!";
JSTKlist[2]="☆新人「森下 みき」さん 『限定!!最大4,000円OFFプレゼント』実施中!!";

var JSTKurl=new Array(); //メッセージに対応したリンク先URL
JSTKurl[0]="http://www.tcollection.net/companion/sasakiamane.html";
JSTKurl[1]="http://www.tcollection.net/companion/amasakitihiro.html";
JSTKurl[2]="http://www.tcollection.net/companion/morisitamiki.html";


function scrMsg(){
document.getElementById('msgBx').innerHTML = msgTxt();
JSTKcnt++;
if(JSTKcnt > JSTKstpTime){
JSTKcnt = 0;
JSTKi++;
if(JSTKi==JSTKlist.JSTKlength){i=0;}
}
setTimer();
}

function msgTxt() {
var trg = 'target="_blank"';
var drift = "";
var speed = 15; //テキストの流れる速さ
var posX = JSTKposLeft-JSTKcnt*speed; //テキストの X座標

  if (posX < JSTKstpX){ posX = JSTKstpX;}//posX が stpX(停止座標)になったらスクロールを止めます
{drift = '<div style="position:absolute;left:' + posX +'"><a href="' + JSTKurl[JSTKi] + '" ' + trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >' + JSTKlist[JSTKi] + '</a></div>';
return drift;}
}

function setTimer() {
JSTKtime = setTimeout("scrMsg()",20);
}

// -->
</script>
その下にビルダーで作成したロールオーバーのスクリプトがありますので、参考サイトをもとに「JSTKcnt」のように「cnt」に「JSTK」を付け加えてやりましたら最後に「undefined」というテキストがでるようになりました。どうかよろしくお願いします。

お世話になります。今ホームページビルダーとMT5を使ってサイトを作成し、運営しております。以前はマーキーを使っていたところに、目立たせたいと思い、電光掲示板(ティッカー)を設置しました。なんとかレイアウトを調整し、3種類順番に表示できるようになったのですが、肝心のところ、右から左にうごきません。サイトを検索し変更を加えたものが下記になります。どうか宜しくお願いいたします。
http://www.tcollection.net/home.html
のフラッシュの直下のテキスト部分です。
<style type="text/css">
<!--
...続きを読む

Aベストアンサー

それから、こいつ
{drift = '<div style="position:absolute;left:' + posX +'"><a href="' + JSTKurl[JSTKi] + '" ' + trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >' + JSTKlist[JSTKi] + '</a></div>';
return drift;}
何のための{}か知らんけど、
drift = '<div style="position:absolute;left:'
+ posX + 'px;'
+'"><a href="' + JSTKurl[JSTKi] + '" '
+ trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >'
+ JSTKlist[JSTKi] + '</a></div>';
return drift;
と、posX + 'px;'を付けた方が、幸せになれる人が多い

さらに
JSTKtime = setTimeout("scrMsg()",20);
は、別にかまわないけど、、
JSTKtime = setTimeout(function(){scrMsg();},20);
と、しとけばあ

それから、こいつ
{drift = '<div style="position:absolute;left:' + posX +'"><a href="' + JSTKurl[JSTKi] + '" ' + trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="setTimer()" >' + JSTKlist[JSTKi] + '</a></div>';
return drift;}
何のための{}か知らんけど、
drift = '<div style="position:absolute;left:'
+ posX + 'px;'
+'"><a href="' + JSTKurl[JSTKi] + '" '
+ trg + ' onmouseover="javascript:clearTimeout(JSTKtime)" onmouseout="se...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング