Q&A
https://teratail.com/help/question-tips
wordpressの新着情報rss（画像つき）をphpのfeedで取得して、jsでフルスクラッチのサイトに表示してます。
取得した記事をスライドショー（画像と文字）で表示させたいのですが、どうすればよいか分かりません。
具体的には
html
1<div id="rss"> </div>
のhtmlに下記のphpのfeedで取得更に、JSでhtmlの＃rssに出力してます。
php
1<?php 2$url = "https://**********/feed/"; 3$xml = file_get_contents($url); 4header("Content-type: application/xml; charset=UTF-8"); 5print $xml; 6?>
JS
1$(function() { 2 $.ajax({ 3 url: 'rss.php', 4 xmlType: 'xml', 5 success: function(xml) { 6 var row = 0; 7 var data = []; 8 var nodeName; 9 var output = $('#rss'); 10// start item 成形 11 $(xml).find('item').each(function() { 12 data[row] = {}; 13 $(this).children().each(function() { 14 nodeName = $(this)[0].nodeName; 15 data[row][nodeName] = {}; 16 attributes = $(this)[0].attributes; 17 for (var i in attributes) { 18 data[row][nodeName][attributes[i].name] = attributes[i].value; 19 } 20 data[row][nodeName]['text'] = $(this).text(); 21 }); 22 row++; 23 }); 24// end item 成形 25 output.wrapInner('<ul class="bxslider"></ul>'); 26 for (i in data) { 27 output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>'); 28 // console.log (data[i]); 29 } 30 } 31 }); 32});
出力された記事が下記の画像のようにデベロッパーツールで出てきたので、
jqueryのboxsliderを入れようと、下記記述して、ファイルも同フォルダ内の収納してます。
html
1<script src="jquery.bxslider.min.js"></script> 2 <link href="jquery.bxslider.css" rel="stylesheet" type="text/css"> 3 <script> 4 $(document).ready(function(){ 5 $('.bxslider li:last-child').prependTo('.bxslider'); 6 $('.bxslider').bxSlider({ 7 auto: true, 8 slideWidth: 640, 9 minSlides: 3, 10 maxSlides:4, 11 } 12 ); 13 }); 14 15</script> 16
試しに通常の通り下記でやるとちゃんと動きます。
html
1<ul class="bxslider"> 2 <li><p>nannka</p><img src="images/6174663536_IMG_0248.jpg" title="キャプション1" alt="1" width="500px"></li> 3 <li><p>nannka</p><img src="images/6241705440_IMG_0384.jpg" title="キャプション2" alt="2" width="500px"></li> 4 <li><p>nannka</p><img src="images/7516817296_IMG_4167.JPG" title="キャプション3" alt="3" width="500px"></li> 5 <li><p>nannka</p><img src="images/IMG_0453 2.JPG" title="キャプション4" alt="4" width="500px"></li> 6</ul>
どなたかご教授いただけますと幸いです。
コメントで失礼しました。
JS
1$(function() { 2$.ajax({ 3url: 'rss.php', 4xmlType: 'xml', 5success: function(xml) { 6var row = 0; 7var data = []; 8var nodeName; 9var output = $('#rss'); 10// start item 成形 11$(xml).find('item').each(function() { 12data[row] = {}; 13$(this).children().each(function() { 14nodeName = $(this)[0].nodeName; 15data[row][nodeName] = {}; 16attributes = $(this)[0].attributes; 17for (var i in attributes) { 18data[row][nodeName][attributes[i].name] = attributes[i].value; 19} 20data[row][nodeName]['text'] = $(this).text(); 21}); 22row++; 23}); 24// end item 成形 25output.wrapInner('<ul class="bxslider"></ul>'); 26for (i in data) { 27output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>'); 28// console.log (data[i]); 29} 30} 31}); 32}); 33 34$(document).ready(function(){ 35$('.bxslider li:last-child').prependTo('.bxslider'); 36$('.bxslider').bxSlider({ 37auto: true, 38slideWidth: 640, 39minSlides: 3, 40maxSlides:4, 41} 42); 43});
私の考えでは下記がliの追加箇所だと思ってます。
JS
1output.wrapInner('<ul class="bxslider"></ul>'); 2for (i in data) { 3output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>'); 4// console.log (data[i]);
おっしゃる通りAjaxでli要素を追加し終えたあとに直後でやればできました。$('.bxslider').bxSlider(/省略/)
うまく理解できずすいません。
お手数おかけいたしました。
一応出来上がったコードはコチラです。
JS
1$(function() { 2 $.ajax({ 3 url: 'rss.php', 4 xmlType: 'xml', 5 success: function(xml) { 6 var row = 0; 7 var data = []; 8 var nodeName; 9 var output = $('#rss'); 10// start item 成形 11 $(xml).find('item').each(function() { 12 data[row] = {}; 13 $(this).children().each(function() { 14 nodeName = $(this)[0].nodeName; 15 data[row][nodeName] = {}; 16 attributes = $(this)[0].attributes; 17 for (var i in attributes) { 18 data[row][nodeName][attributes[i].name] = attributes[i].value; 19 } 20 data[row][nodeName]['text'] = $(this).text(); 21 }); 22 row++; 23 }); 24// end item 成形 25 output.wrapInner('<ul class="bxslider"></ul>'); 26 for (i in data) { 27 output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>'); 28 // console.log (data[i]); 29 } 30 $('.bxslider li:last-child').prependTo('.bxslider'); 31 $('.bxslider').bxSlider({ 32 auto: true, 33 slideWidth: 640, 34 minSlides: 3, 35 maxSlides:4, 36 } 37 ); 38 } 39 }); 40 41 }); 42 43
回答1件
0
ベストアンサー
Ajaxでli要素を追加し終えたあとに$('.bxslider').bxSlider(/*省略*/);を実行してください。
投稿2019/04/12 03:31
総合スコア69407
Ajaxがよく分かってないのですが、具体的にどうすればよいか、お手数ですが具体的にご説明いただけますでしょうか？？
li要素の中に既に記事は収納されてる状態のなのですが、追加とはどこに追加という事でしょうか？そもそも間違えていたらすいません。
無知で申し訳ないです。
AjaxでXMLを取ってきて動的にli要素を追加するコードが質問文に提示されていますが、「li要素を追加し終えたあと」のコード部分がどこかわからない、ということでしょうか。
$(function() {
$.ajax({
url: 'rss.php',
xmlType: 'xml',
success: function(xml) {
var row = 0;
var data = [];
var nodeName;
var output = $('#rss');
// start item 成形
$(xml).find('item').each(function() {
data[row] = {};
$(this).children().each(function() {
nodeName = $(this)[0].nodeName;
data[row][nodeName] = {};
attributes = $(this)[0].attributes;
for (var i in attributes) {
data[row][nodeName][attributes[i].name] = attributes[i].value;
}
data[row][nodeName]['text'] = $(this).text();
});
row++;
});
// end item 成形
output.wrapInner('<ul class="bxslider"></ul>');
for (i in data) {
output.find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a>' + data[i].description.text + '</li>');
// console.log (data[i]);
}
}
});
});
$(document).ready(function(){
$('.bxslider li:last-child').prependTo('.bxslider');
$('.bxslider').bxSlider({
auto: true,
slideWidth: 640,
minSlides: 3,
maxSlides:4,
}
);
});
このような意図であってますでしょうか？
これで試したのですが、以前下記の
<ul class="bxslider">
<li><p>nannka</p><img src="images/6174663536_IMG_0248.jpg" title="キャプション1" alt="1" width="500px"></li>
<li><p>nannka</p><img src="images/6241705440_IMG_0384.jpg" title="キャプション2" alt="2" width="500px"></li>
<li><p>nannka</p><img src="images/7516817296_IMG_4167.JPG" title="キャプション3" alt="3" width="500px"></li>
<li><p>nannka</p><img src="images/IMG_0453 2.JPG" title="キャプション4" alt="4" width="500px"></li>
</ul>
部分は通常通り動くのですが、
記事はそのままです。
すいません。書き方が間違えていますでしょうか？
今開発画面で見ると
Uncaught TypeError: e.indexOf is not a function
at w.fn.init.w.fn.load (jquery-3.3.1.min.js:2)
at rss.js:35
のエラーになっていたのですが、こちらが原因でしょうか？
コメントエリアではマークダウンが使えないため、コードはここではなく質問文にコードブロックで追記してください。（決して元のコードを消さないでください）
また、下記質問に返答をいただけていません。
（再掲）AjaxでXMLを取ってきて動的にli要素を追加するコードが質問文に提示されていますが、「li要素を追加し終えたあと」のコード部分がどこかわからない、ということでしょうか。
追記されたコードがそれまでに有ったコードとなんら変わりませんが、何を伝えたくてそのコードを貼ったのでしょうか。
再掲いただいたのもに関しては、私なりにここかと思う箇所に入れたものが、今質問部分に追加したものです。
こちらで間違えているのであれば、すいませんが li 要素を追加し終えた後がどこか分かりません・・・・
初めて利用してまして、不慣れな点が多いかと思いますが、宜しくお願い致します。
「output.find('ul').append」「$('.bxslider').bxSlider」の部分とか、意味がわからず書いているということでしょうか。そこがわからないとなると、jQueryを勉強してくださいとしか言えなくなります。（ teratailは「コードをください」は推奨していないので https://teratail.com/help/avoid-asking ）
なんら変わりないということであれば、私にはli要素の追加し終えた後がどこか分かりません。
さらにそこに何を記述するのが正解かというところまで、初歩的な箇所かと思いますが、ご教授願いたいです。
また、こちらの部分に関しては理解して書いてるつもりです。
あなたの回答
tips
プレビュー
