選擇所有旁邊的Jquery
[英]Select all Next to with Jquery
問題描述
我正在嘗試通過html進行解析，並希望得到<table>...</table>旁邊的所有<h3>...</h3> <table>...</table> ，但只獲得了第一個<h3></h3><table></table>來自$('h3 + table', thecontents) 。 另外，如果我們想要h3基於它的內容（即星期五，12月14日，星期六，12月15日，......）怎么辦？
$( document ).ready(function() {
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('...') + '&callback=?', function(data){
var thecontents = data.contents;
var required = $('h3 + table', thecontents).html();
$("#hello").html("<pre>" + required + "</pre>");
});
});
內容thecontents或data.contents是
<html>
...
<h3><strong>Friday, Dec. 14</strong></h3>
<table>...</table>
...
<h3>...</h3>
<table>...</table>
</html>
我當前的網站返回required或$('h3 + table', thecontents).html()
<html>
<body id="hello">
<pre>
<p></p>
...
<p></p>
</pre>
</body>
</html>
4 個解決方案
解決方案1
1 已采納 2018-12-26 06:16:07
您將parse string to html轉換或parse string to html代碼是錯誤的，它應該是這樣的
var thecontents = $('<div></div>').html(data.contents)
解析拿到后h3和table ，但以前的元素table應h3你可以試試這個
$(document).ready(function() {
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('...') + '&callback=?', function(data) {
var thecontents = document.createElement('html')
thecontents.innerHTML = data.contents;
var required = $(thecontents).find('h3 + table');
var theResults = '';
$.each(required, function(i, obj) {
// .prev() used to get previous sibling or h3
theResults += $(obj).prev()[0].outerHTML + '\n';
// the table
theResults += obj.outerHTML + '\n';
})
$("#hello").html("<pre>" + theResults + "</pre>");
});
});
它使用.outerHTML來獲取類似<h3>Title</h3>字符串，而.html()將返回innerHTML或Title 。
解決方案2
0 2018-12-26 04:26:14
您可以使用下一個 $("table").next("h3")來獲取表格旁邊的h3和
$("table").next("h3").filter(function() {
return $(this).text().indexOf('Friday')!==-1
})
通過文本過濾 h3。
console.log('finding text', $("table").next("h3").filter(function() { return $(this).text().indexOf('Friday')!==-1 }).length); console.log('next', $("table").next("h3").length); console.log('prev', $("table").prev("h3").length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <table></table> <h3>1</h3> <table></table> <h3>2</h3> <table></table> <h3><strong>Friday, Dec. 14</strong></h3> <div></div> </html>
編輯：
因為你想用字符串獲取hr和table，你可以使用正則表達式
var dataString = '<table></table> <h3>1</h3> <table></table> <h3>2</h3> <table></table> <h3><strong>Friday, Dec. 14</strong></h3> <div></div>'; var regExp = /<\\s*h3[^>]*>(.*?)<\\s*\\/\\s*h3>\\s?<\\s*table[^>]*>(.*?)<\\s*\\/\\s*table>/g; do { var m = regExp.exec(dataString); if (m) { debugger; console.log(m[0]); } } while (m);
解決方案3
0 2018-12-26 05:39:18
我創建了一個樣本如下。 這將添加到同一文檔中。 您可以根據需要進行更改。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h3><strong>Friday, Dec. 14</strong></h3>
<table></table>
<h3><strong>Sunday, Dec. 14</strong></h3>
<table></table>
<h3><strong>SatFriday, Dec. 14</strong></h3>
<table></table>
<h3><strong>SatFriday, Dec. 14</strong></h3>
<table></table>
<div id="hello">
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#hello').append('<pre>');
$('#hello pre').append('<p>');
$(document.body).find($('table')).each(function (a, b) {
$('#hello pre p').append($(this).prev('h3').html()).append(b);
});
});
</script>
解決方案4
0 2018-12-26 05:49:00
我希望你在尋找https://api.jquery.com/next/
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
在腳本中你可以得到它，
$( "li.third-item" ).next().css( "background-color", "red" );
jQuery的選擇下一個Tbody的所有行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.