iT邦幫忙

1

JQ「 :contains」 問題請教

您好:
var x=$(".time:contains('AA'),.time:contains('BB') " ) ;

您好:
我先用 contains 找出相關元素的集合
console.log(x[0])
他會把 該元素抓出來
AA  
12:00:02

請問 ,我該如何 只抓 button的 text ==>AA
或 只抓 span 的id 或 text
呢?
以上 id 都是 動態產生的
所以須等他產生後再抓
謝謝!

1 個回答

4
暐翰
iT邦大師 1 級 ‧ 2019-09-02 09:35:46

假如想要抓取button或是span的text或是id值包含AA,可以這樣做 :
text包含AA selector : "button:contains('AA'),span:contains('AA')"
id包含AA selector : "button[id*='AA'],span[id*='AA']"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	console.log( $("button:contains('AA')")[0] );
    console.log( $("span:contains('AA')")[0] );
    console.log( $("button[id*='AA']")[0] );
    console.log( $("span[id*='AA']")[0] );
});
</script>
</head>
<body>

<button>AA</button>
<span>AA</span>
<button id='AA'></span>
<span id='AA'></span>

</body>
</html>


更新回答 :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	var aa = $("button:contains('AA')");
    var aaText = aa.contents().get(0).nodeValue;
    //解決 : 「我只想抓出 AA」
    console.log(aaText);
    
    //解決 : 「想抓 內的 id 或 12:00:01 」
    var aaChildSpan = $("button:contains('AA') > span");
    console.log( aaChildSpan.attr("id" ));
    console.log( aaChildSpan.text());
});
</script>
</head>
<body>

<button type="button" class="time" id="14" disabled="">AA<span id="new_time14">12:00:01</span></button>
<button type="button" class="time" id="15" disabled="">BB<span id="new_time15">12:00:02</span></button>
<button type="button" class="time" id="16" disabled="">CC<span id="new_time16">12:00:03</span></button>


</body>
</html>

看更多先前的回應...收起先前的回應...
noway iT邦新手 5 級 ‧ 2019-09-02 15:34:21 檢舉

您好:不好意思,我沒說清楚,以下面程式檔範例
當我 var x=$(".time:contains('AA'),.time:contains('BB') " ) ;
x 包含了以下2個資料
AA12:00:01
BB12:00:02

但我若想分別取 取 AA 與 BB 這2個 內容,該如何取? 因為 console.log(x[i].innerHTML);
他會 抓出 AA12:00:01 ,而我只想抓出 AA

再者,若我 想抓 內的 id 或 12:00:01
要如何抓?
謝謝!

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x=$(".time:contains('AA'),.time:contains('BB') " )	;
  console.log(x.length );
 
  $.each(x,function(i){  
		console.log(x[i].innerHTML);
  });
 

    
});
</script>
</head>
<body>

<button type="button" class="time" id="14" disabled="">AA<span id="new_time14">12:00:01</span></button>
<button type="button" class="time" id="15" disabled="">BB<span id="new_time15">12:00:02</span></button>
<button type="button" class="time" id="16" disabled="">CC<span id="new_time16">12:00:03</span></button>

</body>
</html>
暐翰 iT邦大師 1 級 ‧ 2019-09-02 16:44:13 檢舉

noway 我更新回答在內文了

noway iT邦新手 5 級 ‧ 2019-09-03 21:28:57 檢舉

您好: 謝謝您,不想請教的是
var x=$(".time:contains('AA'),.time:contains('BB') " ) ;
抓出來 應該是陣列,我把陣列
$.each(x,function(i){
var y =x[i].contents();
console.log(y);
});
結果
x[i].contents is not a function TypeError: x[i].contents is not a function
,那這樣是否要再轉型?
謝謝!

noway iT邦新手 5 級 ‧ 2019-09-09 08:32:13 檢舉

您好:
想請問
$(document).ready(function(){
var x=$(".time:contains('AA'),.time:contains('BB') " ) ;
console.log(x.length );

$.each(x,function(i){
console.log(x[i].textvalue);
});
});

於 回圈內,x[i] 要如何單取 AA 與BB
及 如何 往下取 相關資料!
謝謝!

我要發表回答

立即登入回答