お世話になります。

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と関連する良く見られている質問

QJavaScriptで文字列の特定文字以降を取得する方法

変数 url に以下のような文字列が代入されています。
var url='http://www.example.com?id=2&page=3';

ここから?以降の文字列だけを取得したいのですが、どのようにすれば良いのでしょうか?
「id=2&page=3」←このような結果が欲しいです。

ブラウザのurlから直接?以降を取得するには location.search を使えば良いというのは調べてわかりましたが、変数に文字列としてurlが代入された場合の方法がわかりません。

ご回答よろしくお願いいたします。

Aベストアンサー

文字列から抽出するのであれば、indexOfを使うか正規表現かでしょうね
深く考えなければ前者、複雑なデータを取りたいなら後者でしょうか

<script>
var url='http://www.example.com?id=2&page=3';
if(url.indexOf("?")>=0){
var str1=url.substring(url.indexOf("?")+1,url.length);
}
document.write(str1+"<br>");

var reg=new RegExp("\\?(.+?)$");
if(url.match(reg)){
var str2=url.match(reg)[1];
}
document.write(str2);
</script>

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Q文字列から、特定の文字を削除したい

アンケートで入力された値を受け取り、メールで送信しているのですが、受け取った値から、特定の文字列を削除することは可能でしょうか?

例えば電話番号の入力の場合、
03-xxxx-xxxx →03xxxxxxxx
077-xxx-xxxx →077xxxxxxx
のように、-(ハイフン)が入力されていたら、-を削除した文字列に置換してメール送信したいのです。
入力する時に、3つのテキストエリアに分けるのは諸事情でできないので、特定の文字を削除する関数か処理方法がありましたら、教えていただきたいです。
よろしくお願いします。

Aベストアンサー

str_replace
http://itbtech.itboost.co.jp/man/php_man/function.str-replace.html

<?php
$orig_telno = "03-xxxx-xxxx";

$telno = str_replace("-", "", $orig_telno);
echo $telno;

03xxxxxxxx

“PHP 文字列” あたりをキーワードに検索すれば
そんなに難しいものでもないような。

Qillegal string offset

php5.3では動いていたプログラムをphp 5.4 で動かしたらwarning illegal string offsetが出て困っています。以下のプログラムでwarningが出ないようにするにはどのようにコーディングすればよいのでしょうか?


$a = array('exists' => 'foo');
if ($a['exists']['non_existent']) {
print 1;
}
print 2;
exit;

Aベストアンサー

isset()を使えばいいと思います

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

Q別ファイルのfunctionの読み込み方

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために私が最初に書いたhtmlの文です(もちろん実行できませんでした)
------------------------------------
<html>
<script language="javascript" src="hello.js">
aisatsu(){
document.write(aa);
}
</script></html>
------------------------------------

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために...続きを読む

Aベストアンサー

function内で「var」をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。(returnで参照することはできます。)
なので変数の内容を取得する場合は「hello.js」の内容を

function aisatsu(){
var aa="hello";
return aa;
}

このように修正し、

<script language="javascript" src="hello.js"></script>
<script language="javascript">
var data=aisatsu();//「aisatsu()」関数の「aa」変数内のデータを引っ張り出す(return aa;)
document.write(data);//書いたり
alert(data);//アラートしたり
window.status=data;//ステータスバーに表示したり・・
</script>

Qタグのテキストを取得

jqueryを使っています。

$('a');を使用しページ内のaタグを全て抜き出すと
hrefの属性値が表示されてしまい、取り出したい<a>タグに
囲まれたテキストを取得することが出来ません。

<a href="http://yahoo.co.jp">Yahoo!</a>
<a href="http://google.co.jp">Google</a>

取り出したい内容は「Yahoo!」及び「Google」のテキスト部分です。
恐らく簡単な内容だとは思いますがご教授お願い出来ますでしょうか?

Aベストアンサー

アンカーに挟まれるのは必ずしもテキストとは限りません。
javascriptで普通にとるならこんなやりかたもできます。

<script>
function check(){
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
var n=a[i].firstChild;
while(n){
if(n.nodeName=="#text") alert(n.nodeValue);
n=n.nextSibling;
}
}
}
</script>
<a href="http://yahoo.co.jp">Yahoo!<img src="1.jpg">Yohaa!</a>
<a href="http://google.co.jp">Google</a>

<input type="button" value="check" onclick="check()" />

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。


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

人気Q&Aランキング